Question

我试图在点击标题时切换div。我想出了这个

$( '.industrial-product' ).find('.show-features').click(function() {
    $('.industrial-product').find('.ip-features').toggle();
});

使用标记

<div class="industrial-product">
<a href="#" class="show-features"><h3>Title</h3></a>
<div class="ip-features">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae modi ex iste deleniti soluta esse recusandae eveniet deserunt animi, officia suscipit voluptatibus temporibus excepturi nemo quaerat eius sequi aut unde.
</div>

这基本上我想要的是在点击标题时显示ip-features div，但这会在页面上显示/隐藏所有内容。我有8个产品，都需要单独切换。任何帮助，将不胜感激。

Answer 1

这应该很容易做到。如果我理解正确，你只想显示和隐藏被点击的那个。您需要使用$（this）进行定位，因为它是标题的兄弟，请转到其父级，然后找到标题。

试试这个：

HTML 的

<div class="industrial-product">
     <a href="#" class="show-features"><h3>Title</h3></a>
     <div class="ip-features">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae modi ex iste deleniti soluta esse recusandae eveniet deserunt animi, officia suscipit voluptatibus temporibus excepturi nemo quaerat eius sequi aut unde.
     </div>
</div>

JS

$( '.industrial-product' ).find('.show-features').click(function() {
    $(this).parent().find('.ip-features').toggle();
});

Answer 2

试试这个：

$( '.industrial-product' ).each(function(){
  var $root = $(this);
  var $ip = $root.find('.ip-features');

  $root.find('.show-features').click(function() {
    $ip.toggle();
  });
});

Answer 3

请务必参考点击发生位置的上下文，找到要隐藏的正确.ip-features div：

$( '.industrial-product' ).find('.show-features').click(function() {
    $(this).parent('.industrial-product').find('.ip-features').toggle();
});

Answer 4

使用$(this)定位单击的特定元素，而不是与选择器匹配的所有元素。

$(".industrial-product").click(function() {
    $(this).find(".ip-features").toggle();
});

此外，使用事件绑定方法时不需要使用.each()。 jQuery自动将它应用于与选择器匹配的所有元素（通常，只要有意义，jQuery就会这样做。）

单独定位每个DIV

4 个答案: