jQuery 选择器：我应该使用哪种 jQuery 选择器组合来更改跨度标签之间的文本

Question

我有以下 HTML：

<tr>
  <td>
    <img id='1' class='promote' src='/images/plus.png' />
    <span>0</span>
    <img id='1' class='demote' src='/images/minus.png' />
  </td>
  <td>
    <img id='2' class='promote' src='/images/plus.png' />
    <span>0</span>
    <img id='2' class='demote' src='/images/minus.png' />
  </td>
...
</tr>

接下来，我正在使用 jQuery ajax：

$('img.promote').click(function() {
  $.ajax({
    url: '/promote/' + this.id,
    success: function(data) {
      $(???).text(data.rating);
    },
    dataType: 'json'
  });
});
$('img.demote').click(function() {
  $.ajax({
  url: '/demote/' + this.id,
  success: function(data) {
    $(???).text(data.rating);
  },
  dataType: 'json'
  });
});

那么，我应该使用哪种 jQuery 选择器组合来代替“???”更改跨度标签之间的文本？还是我做错了？

Answer 1

您需要在点击处理程序中缓存跨度

$('img.promote').click(function() {
  var $span = $(this).siblings('span');
  $.ajax({
    url: '/promote/' + this.id,
    success: function(data) {
      $span.text(data.rating);
    },
    dataType: 'json'
  });
});