0

我在一个页面上有很多实例.wwd-extra-content-trigger，.wwd-extra-content每个实例都在一个.wwd-content-eachdiv 中。

我正在尝试编写一些代码，因此如果您单击触发器，它只会扩展 wwd-content-each 中的额外内容。目前，如果您使用我当前的代码执行此操作，它会在点击时扩展所有额外内容，而不是它自己的。我知道我需要使用 each (this) 或 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();
});

在此先感谢，

4

3 回答 3

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

应该做的伎俩。或者您可以使用最接近的.

于 2013-06-07T08:23:50.117 回答
1

改变这个：

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

对此：

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

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

于 2013-06-07T08:24:26.187 回答
1

根据确切的 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祖先。

于 2013-06-07T08:24:40.737 回答