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

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>

通过使用 this 选择器，您可以缩小到仅被单击的元素。从那里，您需要使用 .next()、.siblings()、or.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 切换正在影响我所有的分享图标

Jquery toggle is effecting all of my share icons

javascript

jquery

toggle

show-hide