Question

我在这里建立一个博客： http://www.bluehavenhomes.com/blog

我的Jquery：

 <script>
        $(document).ready(function(){
            $('.Share-button').click(function(){
                $('.share-icon').toggle();    

            });
        });

    </script>

这应该很简单，但我的大脑是油炸的。我只需要点击我点击的共享按钮来显示共享按钮。现在，如果您单击1共享图标，所有帖子的所有按钮都会显示。我无法识别帖子，因为它们会自动填充博客数据库。

Answer 1

尝试：

<script>
    $(document).ready(function(){
        $('.Share-button').click(function(){
            $(this).closest('.share-icon').toggle();
            //possibly replace .closest() with .siblings() or .next()

        });
    });

</script>

通过使用此选择器，您只能缩小到被点击的元素。从那里开始，您需要使用.next（）,. siblings（）或.closest（）来遍历DOM并找到您正在寻找的元素。

Answer 2

您需要在选择器中更加具体。这仅针对被点击元素的下一个兄弟：

$('.Share-button').click(function(){
    $(this).next('.share-icon').toggle();    
});

您还可以使用共同的祖先元素来包含目标范围：

$('.Share-button').click(function(){
    $(this).closest('.share').find('.share-icon').toggle();    
});

Jquery切换正在影响我的所有共享图标

2 个答案: