具有相同类的多按钮事件的jquery函数

Question

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".like").click(function() {
    var newValue = parseInt($(".no-like").text()) + 1;

    alert(newValue);
    $(".no-like").html(newValue);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="like" data-creation-id="1069347886434951" data-id="1" href="#">
 <span class="no-like">35</span> 
</a>

<a class="like" data-creation-id="1069347886434951" data-id="1">
  <span class="no-like">3</span>
  <span class="glyphicon glyphicon-heart"></span>
</a>
<a href="">hey</a>

＆＃13;

＆＃13;

＆＃13;

这里有多个按钮。每次单击时都需要添加1个值。例如：35到36和3到4.Jquery必须选择具有相应值的每个按钮。但即使是一个按钮，代码也无法正常工作。

Answer 1

$(document).ready(function() {
  $(".like").click(function() {
    var newValue = parseInt($(this).text()) + 1;//use this context for clicked element

    alert(newValue);
    $(".no-like").html(newValue);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="like" data-creation-id="1069347886434951" data-id="1" href="#">
 35
  
</a>

<a class="like" data-creation-id="1069347886434951" data-id="1">
  <span class="no-like">3</span>
  <span class="glyphicon glyphicon-heart"></span>
</a>
<a href="">hey</a>

使用此上下文

Answer 2

您必须使用$(this)从同一元素中获取。

$(document).ready(function() {
  $(".like").click(function() {
    var newValue = parseInt($(this).text()) + 1;
    alert(newValue);
    $(".no-like").html(newValue);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<a class="like" data-creation-id="1069347886434951" data-id="1" href="#">
 35
  
</a>

<a class="like" data-creation-id="1069347886434951" data-id="1">
  <span class="no-like">3</span>
  <span class="glyphicon glyphicon-heart"></span>
</a>
<a href="">hey</a>

Answer 3

只需使用'this'关键字来引用元素的当前实例

$(document).ready(function() {
  $(".like").click(function() {
    var newValue = +$(this).text() + 1;
    if($(this).find('.no-like').length)
      $(this).find('.no-like:eq(0)').text(newValue);
    else
      $(this).text(newValue);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="like" data-creation-id="1069347886434951" data-id="1" href="#">
 35  
</a>

<a class="like" data-creation-id="1069347886434951" data-id="1">
  <span class="no-like">3</span>
  <span class="glyphicon glyphicon-heart"></span>
</a>