Question

这是我的HTML，如下所示

<div id="activeui5" class="activateUiHTML" data-role="collapsible">
   <div class="prd-items-detials">
      <ul>
         <li class="head">
            <form>
                <i class="icon-Description" descid="5" id="desc5" description="This is Popcorn" alt="Description" title="Description" style="display:block">
               </i>
               <i class="delete-item-btn"></i>
            </form>
         </li>
         <li class="prd-items-qt">
            <div style="display:none" class="description-details"></div>
         </li>
      </ul>
   </div>
</div>

我有一个要求，因为当点击 icon-Description 类时，我需要将数据附加到另一个名为 description-details 的类并显示它。

我试过这种方式，但它没有显示任何东西

 $(document).on("click", ".icon-Description", function() {
  var desc = $(this).attr("description");
  var id = $(this).attr("id");
    $(this).find(".prd-items-qt").find('.description-details').empty();
  $(this).find(".prd-items-qt").find('.description-details').append(desc);
    $(this).find(".prd-items-qt").find('.description-details').toggle();
});

控制台下没有例外。有人可以帮我这个。

这是我的小提琴

http://jsfiddle.net/b5Z2v/1/

Answer 1

我建议使用数据属性data-description ....并将代码更改为：

$(document).on("click", ".icon-Description", function() {
    var desc = $(this).data("description");
    var id = $(this).attr("id");
    var dest = $(this).closest('ul').find(".prd-items-qt").find('.description-details');
    dest.html( desc ).toggle();
});

DEMO

注意

由于.prd-items-qt不是.icon-Description的后代，因此您必须前往.prd-items-qt - ul的祖先元素 - 使用{ {1}}。然后，您可以使用.closest()找到.find()和.prd-items-qt。

Answer 2

这是您更新的代码

JS

        $(document).on("click", ".icon-Description", function() {
        var desc = $(this).attr("description");
      var id = $(this).attr("id");
        var nxt_li_details = $(this).parents('li').next('li').find('.description-details');
       nxt_li_details.empty();
      nxt_li_details.html(desc);
        nxt_li_details.toggle();
    });

下一个.description-details的选择器不正确。使用变量nxt_li_details使其更容易理解。 DEMO

打开div并显示数据

2 个答案: