如何仅将 jquery 切换应用于当前 post，而不是页面上的所有 post？

Question

我需要在 post 中单击共享图标时显示和隐藏社交链接。现在我有了这个效果，但是当我点击 post 中的分享图标时，这个效果适用于页面上 posts 列表中的所有 posts，而不仅仅是当前post，但我只需要在单击此共享图标的 post 中使用此效果。我怎样才能做到？

这里是我的 HTML 每个社交链接 post:

        <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>

我的Jquery:

$(document).ready(function () {

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

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

Answer 1

你可以使用$(this).parent().find()

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

您也可以使用 .prev()，例如 $(this).prev('.share-list') 和 $(this).prev().prev('.share-text')，但是 parent().find() 很简单 select 这两个元素只需一行代码

如何仅将 jquery 切换应用于当前 post，而不是页面上的所有 post？

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

javascript

jquery

slidetoggle