javascript - 将点击元素的内容放入另一个元素

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() 并将其设置在你的 .Details Expanded 元素中:

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