如何在jQuery .click函数中添加和减去数字？

我将使用jQuery执行以下操作：如何在jQuery .click函数中添加和减去数字？

在与类“复选框”元素点击：

添加类“对号”
删除类“复选框”
更新一div与“您的请求列表中有x个应用程序”，其中x是已点击的数字
当点击带有“选中标记”的类时，它将从显示的数字中减去

我的示例代码并未显示所有此功能，但我能够完成此操作，除了更新已被点击/“未点击”的数字。

$("span.checkbox").click(function() { 

    if(!oldVal) { 
     var oldVal = "0"; 
    } 

    var newVal = parseFloat(oldVal) + 1; 

    var oldVal = newVal; 

    $("#wishlistapps").html('<li>You have ' + newVal + ' apps in your request list</li>'); 


});

来源

2012-05-03 nitsuj

你有很多复选框（比如几百个），还是只有几个？因为如果只有少数几个，那么有一个更简单的方法：'$（'.checkmark'）.length'会给你类型为“checkmark”的项目数量。 – bfavaretto

不是数百，而是超过50，并且在不断增长。 – nitsuj

您需要声明的点击处理程序之外的计数器变量。你正在做的方式，oldVal将总是当处理程序被调用时为零。

var totalChecked = 0; 
$("span.checkbox, span.checkmark").click(function() { 
    var el = $(this); 
    if(el.hasClass('checkbox')) { 
     el.removeClass('checkbox'); 
     el.addClass('checkmark'); 
     totalChecked++; 
    } else { 
     el.removeClass('checkmark'); 
     el.addClass('checkbox'); 
     totalChecked--; 
    } 
    $("#wishlistapps").html('<li>You have ' + totalChecked + ' apps in your request list</li>'); 
});

演示：http://jsbin.com/ufopok/2。

您也可以使用$('.checkmark').length，正如我在上面的评论中所说的那样，但是它会变得很慢，并且有很多复选框。

来源

2012-05-03 00:40:12 bfavaretto

长度的工作，但我宁愿使用它，如果它更快。你在哪里得到“检查”？ – nitsuj

'checked'是复选框上的标准DOM属性。但是现在我注意到你没有使用实际的复选框......你可以使用'$（this）.hasClass（'checkmark'）'，如果是这样的话（请确认，我会相应地更新我的答案）。 – bfavaretto

正确。我没有使用实际的复选框。它只是一个跨度，通过CSS分配给该类的背景。 jQuery正在处理所有点击事件。 – nitsuj

如何在jQuery .click函数中添加和减去数字？

回答

相关问题