Question

您好我希望将子元素中的内容放入另一个元素中。

我有一个名为＆＃34; DetailsExpanded＆＃34;以及一系列名为＆＃34; IconWrapper＆＃34;的项目。点击＆＃34; IconWrapper＆＃34;我想复制那些项目中的内容＆＃34; ItemDetail＆＃34;进入＆＃34; DetailsExpanded＆＃34;并向下滑动＆＃34; DetailsExpanded＆＃34;用上述内容

请参阅下面的html结构。

我已经开始滑动js但不幸的是我有点超出了我的深度。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

这是你在找什么？

Answer 3

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

将单击元素中的内容放入另一个元素中

3 个答案: