javascript - Javascript/jQuery:选择时如何增加数字并突出显示文本

我已经搜索了，但是找不到我需要的东西。我对Javascript知之甚少，因此我需要一些帮助。

我有一个数字，例如numValue，我想根据在不同区域中选择的项目来增加或减少。另外，我希望这些项目突出显示并保持突出显示，直到再次单击为止。选中时，我希望numValue减少1；取消选中时，我希望numValue增加1。

例：

50（numValue）

第一组


选项1
选项2
选项3


2组


选项1
选项2
选项3


因此，如果我单击组1 /选项1和选项2加组2 /选项3，我希望numValue减少3（对于3个选定的选项）。我希望每个项目在单击时保持选中状态，而在单击另一个选项时不要取消选择。然后再次单击时取消选择。这样就变成了：

47（numValue）

第一组


选项1
选项2
选项3


2组


选项1
选项2
选项3


谁能指出我正确的方向？

最佳答案

这样的事情应该起作用：http://jsfiddle.net/2NJNT/

基本上，我只是将所有逻辑放在class属性中。

的HTML

<ul class="selector">
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
    <li>Qux</li>
</ul>

的CSS

.selector .chosen{
    font-weight: bold;
}

的JavaScript

$(function () {
    var selector = $('ul.selector'),
        numValue = 0,
        HIGHLIGHT_CLASS = 'chosen';

    selector.on('click', 'li', function () {
        var src = $(this);

        if (src.hasClass(HIGHLIGHT_CLASS)) {
            src.removeClass(HIGHLIGHT_CLASS);
            numValue--;
        } else {
            src.addClass(HIGHLIGHT_CLASS);
            numValue++;
        }
    });

});

旧版jQuery（

$(function () {
    var numValue = 0,
        HIGHLIGHT_CLASS = 'chosen';

    $('ul.selector').delegate('li', 'click', function () {
        var src = $(this);

        if (src.hasClass(HIGHLIGHT_CLASS)) {
            src.removeClass(HIGHLIGHT_CLASS);
            numValue--;
        } else {
            src.addClass(HIGHLIGHT_CLASS);
            numValue++;
        }
    });

});