简体   繁体   English

如何将jquery toogle单击仅应用于当前帖子,而不应用于页面上的所有帖子?

[英]how to apply jquery toogle on click only to the current post, but not to all posts on the page?

I need to show and hide social links on share icon click in the post. 我需要在帖子中的共享图标上显示和隐藏社交链接。 Now I have this effect, but when I clicking on the share icon in the post this effect applies to all posts in the posts list on the page, not only on the current post, but I need this effect only in post where this share icon was clicked. 现在,我有了这种效果,但是当我单击帖子中的共享图标时,此效果不仅适用于当前帖子,而且还适用于页面上帖子列表中的所有帖子,而且仅在具有此共享图标的帖子中,才需要此效果被点击。 How I can make it? 我该怎么做?

Here my HTML for social links in every post: 这是我在每个帖子中用于社交链接的HTML:

        <div class="ml-auto no-gutters text-uppercase post-share-text row align-items-center">
            <span class="share-text">' . __( 'Share:', 'understrap' ) . '</span>
                <ul class="list-inline my-auto ml-auto share-list">
                    <li class="list-inline-item"><a class="share" href="#"><i class="fa fa-facebook-f"></i></a></li>
                    <li class="list-inline-item"><a class="share" href="#"><i class="fa fa-twitter"></i></a></li>
                    <li class="list-inline-item"><a class="share" href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
                </ul>
                <i class="my-auto ml-0 fa fa-share-alt"></i>
      </div>

My Jquery: 我的Jquery:

$(document).ready(function () {

    $('.fa-share-alt').click(function () {
        $('.share-list').toggle("slide");
    });

    $('.fa-share-alt').click(function () {
        $('.share-text').toggle("slide");
    });
});

you can use $(this).parent().find() 您可以使用$(this).parent().find()

$(document).ready(function () {
    $('.fa-share-alt').click(function () {
        $(this).parent().find('.share-list , .share-text').toggle("slide");
    });
});

you can also use .prev() like $(this).prev('.share-list') and $(this).prev().prev('.share-text') but parent().find() is simple to select both elements in just one line of code 您还可以使用.prev()例如$(this).prev('.share-list')$(this).prev().prev('.share-text')但使用parent().find()仅需一行代码即可选择两个元素

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM