Javascript/jQuery：如何增加數字並在選中時突出顯示文本

我已經搜索和搜索，但找不到我需要的內容。我對JavaScript知之甚少，所以我需要一些幫助。Javascript/jQuery：如何增加數字並在選中時突出顯示文本

我有一個數字，例如numValue，我想根據在不同區域中選擇的項目來增加或減少。另外，我希望這些項目能夠突出顯示並保持亮點，直到再次點擊。當選擇欲numValue被1至降低和取消選擇時，我想numValue由1

實施例來增加：

（numValue）

組1

選項1
選項2
選項3

組2

選項1
選項2
選項3

所以，如果我點擊組1 /方案1和方案2加2組/選項3我希望numValue減少3（對於3個選定的選項）。我希望每個項目在單擊時保持選中狀態，而不要在單擊另一個選項時取消選擇。然後在第二次點擊時取消選擇。因此，它變成：

（numValue）

組1

選項1
選項2
選項3

2組

選項1
選項2
選項3

任何人都可以點我在正確的方向？

來源

2011-11-15 Alan

你有一些HTML，也許一些JavaScript或jQuery，即使它不工作？ –

如何選擇列表中的'multiple'屬性？ – fliptheweb

我在挫敗中刪除了代碼。基本上我的代碼從50增加到49，但是當它加回去時，它從49增加到51。我相信這是因爲我錯過了像Josh和GregL這樣的語句。 – Alan

像這樣的東西應該工作：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++; 
     } 
    }); 

});

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

});

來源

2011-11-15 02:45:42 fncomp

謝謝喬希。看到例子，看他們如何工作幫助我一噸。 – Alan

請注意，Josh的代碼使用了jQuery 1.7中引入的新的'.on（）'方法，因此您需要使用該版本（或更高版本，下一版本發佈時）。 – GregL

@GregL True。這可以很容易地換出[delegate（）]（http://api.jquery.com/delegate/）。 – fncomp

以及你可以給所有您想要的元素一組類的名稱，如「選擇」，並在你的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"); 
}})

[編輯]我以前用過的jQuery從以下位：http://api.jquery.com/toggleClass/和http://api.jquery.com/data/

讓我知道如果你需要解釋的代碼

來源

2011-11-15 02:40:51

下面是一個使用複選框工作示例：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 
    }); 
});

如果您有任何問題，請告訴我。

來源

2011-11-15 02:46:05 GregL

+1你看中了，並添加了一個更合適的複選框:) – fncomp

感謝GregL爲這個例子。有了這個和喬希的例子，我可以做到我所需要的。 – Alan

Javascript/jQuery：如何增加數字並在選中時突出顯示文本

回答

相關問題