Question

我正试图在点击时切换潜水。但是当我试图切换时，其他人也会被切换我想要一个适用于所有div的单个代码，但只需单击即可切换指定的潜水而不是其他。

My jquery Code:
<script>
 $(document).ready(function() {
        $('.more').click(function() {
                $('.read').slideToggle("fast");
        });
    });
    $('.box').click(function (e) {
    $( '#' + $(this).data('toggleTarget') ).slideToggle(300);
});
    </script>

 i add the demo link here 
    [http://jsfiddle.net/20f2jkk7][1]

Answer 1

您正在使用类选择器，它将选择类read的所有元素。使用.nextAll('.read:first')获取所需的div

 $('.more').click(function () {
     $(this).nextAll('.read:first').slideToggle("fast");
 });

DEMO

但我建议将每个内容放在这样的div中

<div class="content">
  <div class="more"></div>
  <div class="read"></div>
</div>

然后使用.closest（）来获取div，这将更加动态。

$(this).closest('.content').find('.read').slideToggle();

DEMO

Answer 2

在您的代码中，您选择使用read类切换所有带有more类的所有div。

你需要做的是你需要用它来找出被点击的那个，然后通过遍历下一个和下一个找到应该切换的div。

$('.more').click(function () { $(this).next().next().slideToggle("fast"); });

Answer 3

您应该使用each click函数代码。这样每个＆＃34;更多＆＃34;按钮将仅输出它的相应索引＆＃34;读取＆＃34;如果所有内容都是串联的内容...就像each将遍历的数组一样...然后在＆＃34; read＆＃34;选择器，添加eq（索引）以指定在遍历＆＃34;更多＆＃34;期间发生的确切读取内容元素。通过each ...

 $(document).ready(function() {
        $('.more').each(function(index) {
            $(this).on("click", function(){
                $('.read:eq(' + index + ')').slideToggle("fast");
        });
        });
    });
    $('.box').click(function (e) {
    $( '#' + $(this).data('toggleTarget') ).slideToggle(300);
});

这是一个有效的工作人员：http://jsfiddle.net/20f2jkk7/3/

当我试图切换一个div时，我的另一个潜水也被切换了

3 个答案: