[英]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.