Javascript/jQuery : Comment incrémenter un nombre et mettre en évidence le texte lorsqu'il est sélectionné ?

Question

J'ai cherché et cherché, mais je ne trouve pas ce dont j'ai besoin. Je m'y connais très peu en Javascript et j'ai donc besoin d'un peu d'aide.

J'ai un nombre, disons numValue, que je veux augmenter ou diminuer en fonction des éléments sélectionnés dans différentes zones. De plus, je veux que ces éléments soient mis en évidence et le restent jusqu'à ce que l'on clique à nouveau dessus. Lorsque l'élément est sélectionné, je veux que numValue diminue de 1 et lorsqu'il est désélectionné, je veux que numValue augmente de 1.

Exemple :

50 (numValue)

Groupe 1

• Option 1
• Option 2
• Option 3

Groupe 2

• Option 1
• Option 2
• Option 3

Ainsi, si je clique sur Groupe 1/Option 1 et Option 2 plus Groupe 2/Option 3, je veux que la numValue diminue de 3 (pour 3 options sélectionnées). Je veux que chaque élément reste sélectionné lorsqu'on clique dessus et ne soit pas désélectionné lorsqu'on clique sur une autre option. Puis se désélectionner lorsqu'on clique une deuxième fois. Cela devient donc :

47 (numValue)

Groupe 1

• Option 1
• Option 2
• Option 3

Groupe 2

• Option 1
• Option 2
• Option 3

Quelqu'un peut-il m'indiquer la bonne direction ?

Answer 1

Voici un exemple fonctionnel utilisant des cases à cocher : http://jsfiddle.net/greglockwood/D6CP4/1/

J'ai utilisé le code HTML suivant pour chaque groupe (n'hésitez pas à le modifier, c'était juste un exemple) :

<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>

Voici mon Javascript, qui utilise 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
    }); 
});

Faites-moi savoir si vous avez des questions.

Answer 2

Quelque chose comme ceci devrait fonctionner : http://jsfiddle.net/2NJNT/

En gros, je mettrais toute la logique dans l'attribut de classe.

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

});

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

});

Answer 3

Vous pouvez donner à tous les éléments que vous souhaitez un nom de classe, par exemple "select", et définir une classe de mise en évidence dans votre css, puis utiliser quelque chose comme ceci :

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] J'ai utilisé les éléments suivants de jquery : http://api.jquery.com/toggleClass/ y http://api.jquery.com/data/

faites-moi savoir si vous avez besoin d'une explication pour le code