单击事件时无法更新文本答案

【问题标题】：Unable to update text , on click of a event单击事件时无法更新文本
【发布时间】：2014-05-30 17:56:32
【问题描述】：

我有一个带有加号和减号按钮的 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/

【问题讨论】：

标签： javascript jquery html

【解决方案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

【讨论】：

同样，如果我需要更新数量，为什么这不起作用？ $(this).closest("ul").find("div.price").text()*quantity;

【解决方案2】：

您没有正确分配文本值。

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

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

固定示例 - http://jsfiddle.net/LESn3/1/

【讨论】：

【解决方案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);

【讨论】：

【解决方案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

【讨论】：