使用公共类对每个元素执行操作

时间:2017-12-19 01:03:39

标签: javascript jquery html

我希望在点击共享图标时淡入共享链接,但问题是他们是很多人,它就像一个帖子,我正在使用一个公共类淡入链接,当我点击一个图标,所有共享链接都淡入,有没有办法淡化每个帖子的链接,我试图让我的代码干。

<div class="first-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
    <ul class="shareo">
        <li><a href=""><i class="fa fa-facebook"></i></a></li>
        <li><a href=""><i class="fa fa-twitter"></i></a></li>
    </ul>
</li>
</div>  

<div class="second-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
    <ul class="shareo">
        <li><a href=""><i class="fa fa-facebook"></i></a></li>
        <li><a href=""><i class="fa fa-twitter"></i></a></li>
    </ul>
</li>
</div>

$('.fire-share').click(function(){
    $('.shareo').fadeToggle()
})

我已经尝试过使用.each()但它仍然会引发同样的问题,如果我使用不同的类或id,它可以正常工作但是很多数字的帖子,它不干燥

$('.fire-share').click(function(){
      $('.shareo').each(function(i,obj){
      $(this).fadeToggle()
   })
})

1 个答案:

答案 0 :(得分:2)

  1. 使用此上下文告知点击的元素
  2. 使用find搜索父元素中的特定元素
    &#13;
    &#13;
    $('.fire-share').click(function(){
        $(this).find('.shareo').fadeToggle()
    })
    &#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="first-post">
    <li class="fire-share"><i class="fa fa-share-alt"></i>
        <ul class="shareo">
            <li><a href=""><i class="fa fa-facebook"></i></a></li>
            <li><a href=""><i class="fa fa-twitter"></i></a></li>
        </ul>
    </li>
    </div>  
    
    <div class="second-post">
    <li class="fire-share"><i class="fa fa-share-alt"></i>
        <ul class="shareo">
            <li><a href=""><i class="fa fa-facebook"></i></a></li>
            <li><a href=""><i class="fa fa-twitter"></i></a></li>
        </ul>
    </li>
    </div>
    &#13;
    &#13;
    &#13;