Question

我有一个带加号和减号按钮的div：

<div class="col">
    <i class="minus"></i>
    <i class="qt">1</i>
    <i class="plus"></i>
</div>

点击加号按钮，我想增加数量，同样减少数量，点击减号按钮。

为了实现这一点，我写了两个事件：

$( document ).on( "click", ".minus", function() {
   var quantity = $(this).closest("ul").find("i.qt").text();
   var a = parseInt(quantity);
   a-=1; 
   $(this).closest("ul").find("i.qt").text-a;    
});

$( document ).on( "click", ".plus", function() {
   var quantity = $(this).closest("ul").find("i.qt").text();
   var a = parseInt(quantity);
   a+=1; 
   $(this).closest("ul").find("i.qt").text+a;
});

然而，按下什么按钮并不重要，没有任何反应。

你能帮忙吗？

显示我的问题的小提琴：http://jsfiddle.net/LESn3/2/

Answer 1

您可以使用.next()和prev()来定位数量文字：

$( document ).on( "click", ".minus", function() {
  var quantity = $(this).next().text(parseInt($(this).next().text())-1);
});
$( document ).on( "click", ".plus", function() {
  var quantity = $(this).prev().text(parseInt($(this).prev().text())+1);
});

<强> Demo

Answer 2

您没有正确分配文本值。

您需要将.text作为函数调用：

$(this).closest("ul").find("i.qt").text(a);

修复示例 - http://jsfiddle.net/LESn3/1/

Answer 3

您实际上并未更新文字

如果更换线条，它将起作用：

$(this).closest("ul").find("i.qt").text-a;
// ...
$(this).closest("ul").find("i.qt").text+a;

使用：

$(this).closest("ul").find("i.qt").text(a);

Answer 4

根据我对OP的理解，这是您应该关注的解决方案。

$(document).on( "click", ".minus,.plus", function() {
    var quantity = $(this).siblings('.qt').text();
    var a = parseInt(quantity);
    if($(this).hasClass('minus'))
        a-=1;
    else
        a+=1; 
    $(this).siblings('.qt').text(a);    
});

如果您有任何问题，请与我们联系。

<强> FIDDLE

单击事件时无法更新文本

4 个答案: