Question

我有这样的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包装器（例如，如果单击内容2按钮，则打开slideToggle comments2，依此类推）。

我该怎么做？

Answer 1

你可以这样做：

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

这将找到班级.comments-wrapper的相关div并滑动切换。

小提琴：http://jsfiddle.net/xCJQB/

Answer 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');

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

Answer 3

$('.show-comments').click(function (e) {
    e.preventDefault();
    var num = this.id.match(/\d+$/)[0];
    $("#comment" + num).slideToggle('slow');
});

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

Answer 4

使用此上下文

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

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

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

Answer 5

您可以添加一个公共类来将按钮与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/

Javascript点击特定于ID

5 个答案: