修改＆＃39;文字＆＃39;按类名称的元素

Question

我坚持认为应该简单易懂的事情（显示我所知道的事情！）。

在HTML中我有：

<a class="removeQuantity"> - </a> 
<span class="quantity"> 1 </span>
<a onclick="addQuantity('2')"> + </a>

在我的剧本中我得到了这个功能：

function addQuantity(iQuant) {
    iQuant = parseInt(iQuant);
    $(this).prevAll('.quantity').text(iQuant.toString());
}

所以我试图做的是将数量类中包含的值从1更改为传递给函数（2）的值，但似乎没有任何效果。

有人能指出我正确的方向吗？

谢谢， ç

Answer 1

问题在于，当您使用on*属性分配事件处理程序时，它不会将范围设置为当前元素，因此this引用窗口，而不是引发事件的元素。要解决此问题，您可以将元素引用直接传递给函数，如下所示：

<a onclick="addQuantity(2, this)"> + </a>

function addQuantity(iQuant, el) {
    $(el).prevAll('.quantity').text(iQuant);
}

请注意，在上面的示例中，我直接向函数传递了一个整数，以避免必须转换它的类型。

作为更好的替代方案，您可以使用不显眼的JS附加事件处理程序。鉴于您使用jQuery标记了问题，这里有如何做到这一点：

<a class="quantity-amend" data-quantity="2"> + </a>

$('.quantity-amend').click(function(e) {
    e.preventDefault();
    $(this).prevAll('.quantity').text($(this).data('quantity'));
});

  

我无法使用不引人注目的（我认为！），因为我确认的页面部分会在确认数量更改时重新加载。

在这种情况下，您可以使用委派的事件处理程序：

$(document).on('click', '.quantity-amend', function(e) {
    e.preventDefault();
    $(this).prevAll('.quantity').text($(this).data('quantity'));
});