Javascript/jQuery：番号を増やして選択したときにテキストを強調表示する方法

Question

検索して検索しましたが、必要なものが見つかりませんでした。私はJavascriptについてほとんど知っていないので、これについて少し助けが必要です。

私は、異なる領域で選択されている項目に基づいて増減したい数値、たとえばnumValueを持っています。さらに、これらのアイテムをハイライト表示し、再度クリックするまでハイライト表示します。選択されたとき、私はnumValueが1減少したいと選択を解除するとき、私はnumValue 1.

例で増やしたい：

（numValue）

グループ1

• オプション1
• オプション2
• オプション3

グループ2

• オプション1
• オプション2
• オプション3

だから私はグループをクリックした場合の1 /オプション1とオプション2プラスグループ2 /オプ​​ション3 I numValueを3つ減らしたい（3つの選択されたオプションに対して）。他のオプションをクリックしたときに選択を解除しないで、クリックしたときに各アイテムを選択したままにしておきたい。その後、もう一度クリックすると選択解除されます。だから、次のようになります。

（numValue）

グループ1

• オプション1
• オプション2
• オプション3

グループ2

• オプション1
• オプション2
• オプション3

誰もが正しい方向に私を指すことができますか？

Answer 1

このような何か作業をする必要があります：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++; 
     } 
    }); 

}); 

Answer 2

だけでなく、あなたは、あなたの希望の要素セットのクラス名のすべてを与えることができ、たとえば「選択」し、あなたの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"); 
}}) 

[EDIT]をI jqueryのから、次のビットを使用しまし」：http://api.jquery.com/toggleClass/と

http://api.jquery.com/data/はあなたがコードの説明が必要な場合は私に知らせて

Answer 3

は、チェックボックスを使用して実施例である：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> 

のjQueryを利用して、私のJavascriptを、次のとおりです。

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

質問がある場合はお知らせください。