Question

喂！我终于开始觉得使用jQuery很舒服，所以现在我正在努力改进我编写的代码。有没有人可以帮我提高效率？

$("a.more_info").toggle(function(){
      var itemid = $(this).parent().parent().parent().parent().attr('id');
      var itemid_hash = "#" + itemid + " .details_exp";
      var itemid_tog_more = "#" + itemid + " a.more_info";       $(itemid_tog_more).addClass("less_info").removeClass("more_info");
      $(itemid_hash).fadeIn();
}, function () {
      var itemid = $(this).parent().parent().parent().parent().attr('id');
      var itemid_hash = "#" + itemid + " .details_exp";
      var itemid_tog_less = "#" + itemid + " a.less_info";
      $(itemid_tog_less).addClass("more_info").removeClass("less_info");
      $(itemid_hash).fadeOut();
});

首先，有没有办法在DOM中上升四个级别而不会叠加.parent（）四次？第二，有没有更好的方法来定义“itemid”和“itemid_hash”变量，所以我不必为切换函数的后半部分重新定义它们？代码工作得很好，但我只是想确保我以最正确的方式做事。谢谢！

Answer 1

更新2 ：Working demo.

更新：为了完整性，这是我所指的HTML（仅限相关部分）：

<div class="work">
    <div class="details">
        <nav>
            <a href="#" class="prev">prev</a>
            <a href="#" class="more_info">more info</a>
            <a href="#" class="next">next</a>
        </nav>
        <div class="details_exp" style="display: none; ">
            <!-- content here --->
        </div>
    </div>
    <!-- ... -->
</div>

你可以这样做：

$("a.more_info").toggle(function(){
      $(this).addClass("less_info").removeClass("more_info");
      // $(this).parent().nextAll('.details_exp').fadeIn() could work too
      $(this).closest('.work').find('.details_exp').fadeIn();
}, function () {
      $(this).addClass("more_info").removeClass("less_info");
      $(this).closest('.work').find('.details_exp').fadeOut();
});

无需手动构建选择器。我认为item_tog_less实际上是指当前点击的元素对吗？然后你可以使用$(this)。

如果带有详细信息的框总是在链接之后（更准确地说是它的父级，它看起来像这样），你也可以这样做：

$(this).parent().nextAll('.details_exp').fadeIn();

参考：find()，closest()，nextAll()

p.s。：不错的网站！

Answer 2

如果是案例或多父母，您可以将其更改为closest：

var itemid = $(this).parent().parent().parent().parent().attr('id');

有关

var itemid = $(this).closest('#YourId or .YourClass');

你可以在DOM的一小部分而不是整个DOM中使用选择器。

var itemid_hash = $(".details_exp", itemid );

这将为您留下一个jQuery对象来执行此操作

itemid_hash.fadeIn();

使jQuery代码更正确/高效

2 个答案: