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();;
    })
});

演示：Fiddle

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

3 个答案: