クリックした要素のコンテンツを別の要素に配置

Question

こんにちは、子要素のコンテンツを別の要素に配置したいと考えています。

私は、 "DetailsExpanded"と呼ばれる隠しdivと "IconWrapper"という一連の項目を持っています。 "IconWrapper"をクリックすると、そのアイテム "ItemDetail"の内容を "DetailsExpanded"にコピーし、 "DetailsExpanded"をその内容で下にスライドさせたいと考えています。

下記のHTML構造を参照してください。

私はスライディングjsで始まりましたが、私は残念なことに私の深さから少しです。

$(".IconWrapper").click(function() { 
 
    if ($(".DetailsExpanded").is(":hidden")) { 
 
    $(".DetailsExpanded").slideDown("fast"); 
 
    } else { 
 
    $(".DetailsExpanded").hide(); 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="DetailsExpanded"></div> 
 

 
     <div class="IconWrapper"> 
 
      <div class="ItemDetail">Content to copy</div> 
 
      <div class="Icon icon-icons-d-steps"></div> 
 
     </div> 
 

 
     <div class="IconWrapper"> 
 
      <div class="ItemDetail">Content to copy</div> 
 
      <div class="Icon icon-icons-d-steps"></div> 
 
     </div> 
 

 
     <div class="IconWrapper"> 
 
      <div class="ItemDetail">Content to copy</div> 
 
      <div class="Icon icon-icons-d-steps"></div> 
 
     </div>

Answer 1

あなたがしなければならないのは、クリックされた要素の.html()を取るために、あなた.DetailsExpanded要素でそれを設定することです：

$(".IconWrapper").on("click", function() { 
    var content = $(this).find(".ItemDetail").html(); 
    $(".DetailsExpanded").html(content); 
    $(".DetailsExpanded").slideToggle("fast"); // this replaces slideDown or hide 
}); 

Answer 2

$(".IconWrapper").click(function() { 
 
    var text = $(this).find('.ItemDetail').text(); 
 
    $(".DetailsExpanded").html(text).slideDown("slow"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="DetailsExpanded"></div> 
 

 
     <div class="IconWrapper"> 
 
      <div class="ItemDetail">Content to copy1</div> 
 
      <div class="Icon icon-icons-d-steps"></div> 
 
     </div> 
 

 
     <div class="IconWrapper"> 
 
      <div class="ItemDetail">Content to copy2</div> 
 
      <div class="Icon icon-icons-d-steps"></div> 
 
     </div> 
 

 
     <div class="IconWrapper"> 
 
      <div class="ItemDetail">Content to copy3</div> 
 
      <div class="Icon icon-icons-d-steps"></div> 
 
     </div>

これはあなたの探しているものですか？

Answer 3

$(document).ready(function(){ 
 

 
    $('.IconWrapper').on('click', function(e) { 
 
     $(".DetailsExpanded").text($(this).text()).slideDown(); 
 
    }); 
 
});