腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >Javascript/jQuery:如何在选择时增加一个数字并突出显示文本

问Javascript/jQuery:如何在选择时增加一个数字并突出显示文本
EN

Stack Overflow用户

提问于 2011-11-14 18:27:04

回答 3查看 428关注 0票数 2

我找了又找，却找不到我需要的东西。我对Javascript知之甚少，所以我需要一些帮助。

我有一个数字，比如numValue，我想根据在不同区域选择的项目来增加或减少。此外，我希望这些项目突出显示和停留高光，直到再次点击。当被选中时，我希望numValue减少1，当被取消选举时，我希望numValue增加1。

示例：

50 (numValue)

组1

选项1
选项2
选项3

第二组

选项1
选项2
选项3

因此，如果我单击第1组/选项1和选项2加上第2组/选项3，我希望numValue减少3(对于3个选定的选项)。我希望每个项目在单击时保持选中，而不是在单击另一个选项时取消选择。然后在第二次单击时取消选择。因此，它变成：

47 (numValue)

组1

Option 1
Option 2
选项3

第二组

Option 3

选项1
选项

谁能给我指明正确的方向？

javascript

jquery

实时音视频9.9元起，弱网高质量通信

9.9元畅享2万分钟实时音视频通话时长，低成本、低门槛快速接入端到端延时＜300ms 的高品质实时互动通话

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-11-14 18:45:42

像这样的东西应该能工作：http://jsfiddle.net/2NJNT/

基本上，我只是把所有的逻辑都放在了class属性中。

<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++;
        }
    });

});

Legacy jQuery (< 1.7)

$(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++;
        }
    });

});

票数 1

Stack Overflow用户

发布于 2011-11-14 18:46:05

下面是一个使用复选框的工作示例：http://jsfiddle.net/greglockwood/D6CP4/1/

对于每个组，我使用了以下HTML代码(尽管可以更改，这只是一个例子)：

<div class="group">
    <span class="header">Group 1</span>
    <ul>
        <li><input type="checkbox" id="group1_1" /><label for="group1_1">Option 1</label></li>
        <li><input type="checkbox" id="group1_2" /><label for="group1_2">Option 2</label></li>
        <li><input type="checkbox" id="group1_3" /><label for="group1_3">Option 3</label></li>
    </ul>
</div>

下面是我的Javascript，它使用jQuery：

$(function() {
   var numValue = 50;
    $('.group :checkbox').click(function() {
       var $cb = $(this);
        if ($cb.is(':checked')) {
            numValue -= 1;
            $cb.closest('li').addClass('highlight');  
        } else {
            numValue += 1;
            $cb.closest('li').removeClass('highlight');
        }
        $('#numValue').text(numValue); // show the value on the page
    }); 
});

如果你有任何问题，请告诉我。

票数 2

Stack Overflow用户

发布于 2011-11-14 18:40:51

您可以为所有想要的元素设置一个设置类名，例如"select“，并在css中定义一个突出显示类，然后使用如下所示：

var numValue=50;
$(".select").click(function(){
if(this.data("selected")){
numValue +=1;
$(this).data("selected",false).toggleClass("highlight");
}else{
numValue -=1;
$(this).data("selected",true).toggleClass("highlight");
}})