追加一個子元素到另一個DIV同時還可以利用原單父元素

參考我有這樣的html代碼追加一個子元素到另一個DIV同時還可以利用原單父元素

<div id="left-container" class="w3-container w3-left"> 
    <div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red"> 
     <h1>Give</h1> 
     <h3>Selected Definition:</h3> 
     <ul style="display:none;"> 
      <li> offer in good faith </li> 
      <li> inflict as a punishment </li> 
      <li> afford access to </li> 

     </ul> 
    </div> 

    <div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red"> 
     <h1>Up</h1> 
     <h3>Selected Definition:</h3> 

     <ul style="display:none;"> 
      <li> to a higher intensity </li> 
      <li> to a later time </li> 
      <li> used up </li> 

     </ul> 
    </div> 

</div> 

<div id="right-container" class="w3-container w3-right"></div>

我希望用戶，一旦他上的wordDiv的一個點擊，要能看到在正確的容器中找到該單詞的潛在定義（可在每個「wordDiv」的「ul」元素中找到），選擇其中一個定義，然後我想在左容器中的原始wordDiv中顯示所選定義。

可以發現Jsfiddle Demo Here

來源

2016-08-03 Mortada

你需要javascript才能做到這一點：在.wordDiv上單擊添加一個監聽器，然後設置然後選擇你想要的內容，獲取它的內容並將它添加到你想要的位置 – shwarp

我知道但我怎麼能回到..我的意思是在將「ul」追加到右側容器後，如何將選定的li定義添加到正確的單詞div？ – Mortada

請檢查該fiddle

我已經加入li元素根據您選擇了DIV另一個DIV。

來源

2016-08-03 09:54:37

我想讓用戶選擇其中一個定義，然後將其顯示在原始單詞div「Selected Definition」中。所以基本上「li」元素是一個無線電輸入。 – Mortada

使用jQuery的解決方案。 Updated Fiddle

$(function() { 
    $('.wordDiv').click(function() { 
    var txt = $(this).find('ul').html(); 
    $('#right-container').html('<ul>' + txt + '</ul>') 
    }) 
})

來源

2016-08-03 09:57:25 Pugazh

我希望用戶選擇其中一個定義，然後將其顯示在原始單詞div「Selected Definition」中。所以基本上「li」元素是一個無線電輸入。 – Mortada

您可以使用jQuery的這個變量的點擊功能，這裏是你的要求Updated Fiddle

它把在右邊的div li元素，並添加的onclick監聽器的工作jQuery的例子，其具有它的起源的knowlege）

$('h1').click(function(){ 
 
var origin=$(this); 
 
\t $(this).siblings('ul').children().click(function(){ 
 
\t \t $(this).parent().hide(); 
 
\t \t $(origin).parent().append(this); 
 
    \t  $(this).replaceWith($('<div>' + this.innerHTML + '</div>')) 
 
}) 
 
    
 
    $(this).siblings('ul').show(); 
 
    $("#right-container").append($(this).siblings('ul')); 
 
    
 
}) 
 

 
$('ldi').click(function(){ 
 
\t $(this).parent().hide(); 
 
\t $(this).parent().parent().append(this); 
 
    $(this).replaceWith($('<div>' + this.innerHTML + '</div>')) 
 
})

來源

2016-08-03 09:59:22 Reiner

追加一個子元素到另一個DIV同時還可以利用原單父元素

回答

相關問題