0

我有一个这样的 div 设置：

<div class="content">
    <button class="show-comments" id="content1"></button>
</div>

<div class="comments-wrapper" id="comment1"></div>

<div class="content">
    <button class="show-comments" id="content2"></button>
</div>

<div class="comments-wrapper" id="comment2"></div>

我有以下代码：

$('.show-comments').click(function(e){
    e.preventDefault();
    $('.comments-wrapper').slideToggle('slow');
});

正如您所假设的那样，代码可以工作，但是以类为基础的。我希望它只打开其关联 ID 的 .comments-wrapper（即，如果单击内容 2 按钮，则打开 slideToggle comments2 等等）。

我该怎么做？

4

5 回答 5

2

你可以这样做：

$(this).parent("div").next('.comments-wrapper').slideToggle('slow');

这将找到类.comments-wrapper和滑动切换的相关 div。

还有一个小提琴：http: //jsfiddle.net/xCJQB/

于 2013-05-24T20:23:19.870 回答
2 
$('.show-comments').click(function(e){
    e.preventDefault();
    $(this).closest(".content").next('.comments-wrapper').slideToggle('slow');
});

请注意，这取决于.content紧随其后的元素.comments-wrapper。

如果您有权修改 html 本身，我建议添加一个包装器元素，然后执行以下操作以避免依赖元素的确切顺序：

<div class="wrapper">
    <div class="content">
        <button class="show-comments" id="content1"></button>
    </div>

    <div class="comments-wrapper" id="comment1"></div>
</div>
<div class="wrapper">
    <div class="content">
        <button class="show-comments" id="content2"></button>
    </div>

    <div class="comments-wrapper" id="comment2"></div>
</div>

$(this).closest(".wrapper").find('.comments-wrapper').slideToggle('slow');

这样，如果您在 the.content和 the之间添加一个元素，.comments-wrapper它不会破坏代码。

于 2013-05-24T20:23:37.380 回答
1 
$('.show-comments').click(function (e) {
    e.preventDefault();
    var num = this.id.match(/\d+$/)[0];
    $("#comment" + num).slideToggle('slow');
});

演示---> http://jsfiddle.net/7pkyk/1/

于 2013-05-24T20:29:55.433 回答
0

使用此上下文

   $(this).closest('.comments').next('.comments-wrapper').slideToggle('slow');

如果它不是直接元素，那么你也可以试试这个

$(this).closest('.comments')
       .nextAll('.comments-wrapper').first().slideToggle('slow');
于 2013-05-24T20:23:43.237 回答
0

您可以添加一个通用类来将按钮与 div 关联。

html:

<div class="content">
    <button class="show-comments group1" id="content1"></button>
</div>

<div class="comments-wrapper group1" id="comment1">1</div>

<div class="content">
    <button class="show-comments group2" id="content2"></button>
</div>

<div class="comments-wrapper group2" id="comment2">2</div>

javascript:

$('.show-comments').click(function(e){
    var associate = $(this).attr('class').match(/group\d+/).pop();
    var selector = '.comments-wrapper.' + associate;
    e.preventDefault();
    $(selector).slideToggle('slow');
});

http://jsfiddle.net/uMNfJ/

于 2013-05-24T20:56:57.150 回答