jquery - 隐藏显示每个块的不喜欢 jquery 脚本

Question

我真的有很多类似的块有喜欢和不喜欢的 div：

<div class="cal_days com_each_photo">
<img class="littleimage" src="img/calendar/calendar_2.jpg" alt="day">
<div class="com_blur">
     <div class="com_link_like" style="cursor:pointer">like!</div>
     <div class="com_link_dislike" style="cursor:pointer;display:none">dislike</div>
    </div>

 <div class="cal_days com_each_photo">
<img class="littleimage" src="img/calendar/calendar_2.jpg" alt="day">
<div class="com_blur">
     <div class="com_link_like" style="cursor:pointer">like!</div>
     <div class="com_link_dislike" style="cursor:pointer;display:none">dislike</div>
    </div>

...我制作了 jquery 脚本：

$(document).ready(function(){
    $(".com_link_like").click(function () {
       $(this).hide();
       $('.com_link_dislike').show();
       $('.com_link_dislike').click(function () {
          $(this).hide();
          $('.com_link_like').show();
       })
    })
});

问题：它有效，但是当我按“喜欢”时，我所有的 div 都将类“.com_link_dislike”更改为“.com_link_dislike”，但我只需要在确切的块中更改它。如何修复？

Answer 1

如果您只想更改关联的喜欢/不喜欢，请遍历树。

$(this).parent().find('.com_link_like').show();

将去父 dom，找到合适的 div，并显示它。

Answer 2

我不确定你想得到什么，但我认为这可能会有所帮助：

$(document).ready(function(){
    $(".com_link_like").click(function () {
       $(this).hide();
       $(this).next().show();
    });
    $('.com_link_dislike').click(function () {
       $(this).hide();
       $(this).prev().show();
    });
});

Answer 3

您需要将选择器缩小到当前元素兄弟，在这种情况下，您可以使用 .next() 和 .prev()

$(document).ready(function(){
    $(".com_link_like").click(function () {
        $(this).hide().next().show();
    })
    $('.com_link_dislike').click(function () {
        $(this).hide().prev().show();;
    })
});

演示：小提琴