Question

我在页面上有很多.wwd-extra-content-trigger和.wwd-extra-content的实例，每个实例都在.wwd-content-each div内。

我正在尝试编写一些代码，因此如果您单击触发器，它只会扩展其中wwd-content-each中的额外内容。目前，如果您使用我当前的代码执行此操作，它会在点击时扩展所有额外内容，而不是它自己的内容。我知道我需要使用每个（这个）或每个（）但我不确定在哪里。

$('.wwd-content-container .wwd-content-each .wwd-extra-content-trigger').click(function(e) {
    jQuery('span', this).text($('span', this).text() == 'navigateup' ? 'navigatedown' : 'navigateup');
    jQuery('.wwd-extra-content').fadeToggle();
});

提前致谢， [R

Answer 1

$(this).parent().find('.wwd-extra-content').fadeToggle()

应该做的伎俩。或者您可以使用closest。

Answer 2

改变这个：

jQuery('.wwd-extra-content').fadeToggle();

到此：

jQuery(this).closest('.wwd-content-each').find('.wwd-extra-content').fadeToggle();

如果您还显示一些相关的HTML，则很可能会进行优化。

Answer 3

根据确切的HTML布局，您可以使用以下任一项：

$('.wwd-extra-content-trigger').click(function(e) {
    $(this).siblings('.wwd-extra-content').fadeToggle();
});

或者这个：

$('.wwd-extra-content-trigger').click(function(e) {
    $(this).closest('.wwd-content-each').find('.wwd-extra-content').fadeToggle();
});

第一个版本假定内容触发器和内容是同一HTML元素的子元素;第二个版本假设他们共享一个共同的.wwd-content-each祖先。

jQuery each（）或（this）用于显示/隐藏切换

3 个答案: