JQuery per gli elementi di punto culminante in una lista

Question

Ho una lista OL:

<ol>
<li class="group1">item 1</li>
<li class="group1">item 2</li>
<li class="group2"> item 3</li>
<li class="group3">item 4</li>
<li class="group1">item 5</li>
<li class="group3"> item 6</li>
<ol>

e una serie di caselle che corrispondono ai nomi di classe

<input type="checkbox" value="group1" />group 1
<input type="checkbox" value="group2" />group 2
<input type="checkbox" value="group3" />group 3

Quello che voglio che accada è che quando un utente fa clic su una casella di controllo a 'tick' esso, le righe li che non vengono controllati sono fadedOut (cambiamento opacità) e poi le righe che hanno la classe che corrisponde al valore della casella di controllo sono evidenziatore (colore di sfondo cambiato in giallo).

Così, per esempio, se il gruppo 3 è stato cliccato, punto 4 e punto 6 sarebbe stato evidenziato. Quindi se il gruppo 2 é stata cliccata punto 3 sarà evidenziata (voce 4 e 6 resterebbero evidenziato). Se il gruppo 2 è stato non-selezionata, punto 3 sarebbe appaiono sbiadite fuori, anche se il punto 4 e 6 resterebbero evidenziato.

Il codice che ho in questo momento è:

$('input').click(function(){
    input = $(this);
    classVal = "." + input.val();
    elements = $(classVal );

    if (input.is(':checked')) {
        elements.css("background-color", "#FFFF00");
    } else {
        elements.css("background-color", "");
    }
});

Questo gestisce l'evidenza, ma non fa la dissolvenza degli elementi non controllati. So di poter cambiare l'opacità usando i CSS ( "opacità", 0,33) o fadeTo ( "lento", 0,33), ma non è sicuro come gestire questo nel codice e dove metterlo.

Se uno qualsiasi dei miei altri codice può essere rimesso a posto anche per favore fatemelo sapere

Grazie

Answer 1

Il codice jQuery:

$('input:checkbox').bind('click', function(){
    var checkedClasses = $("input:checked").map(function() {
        return $(this).val();
    });
    var uncheckedOpacity = (checkedClasses.length == 0) ? 1.0 : 0.5;
    $('ol li').css({opacity: uncheckedOpacity, backgroundColor: 'transparent'});
    $.each(checkedClasses, function(index, value){
        $('.' + value).css({backgroundColor: '#ff0', opacity: 1.0});
    });
});

Questa HTML:

<ol>
    <li class="group1">item 1</li>
    <li class="group1">item 2</li>
    <li class="group2">item 3</li>
    <li class="group3">item 4</li>
    <li class="group1">item 5</li>
    <li class="group3">item 6</li>
<ol>

<form>
    <label><input type="checkbox" value="group1" />group 1</label>
    <label><input type="checkbox" value="group2" />group 2</label>
    <label><input type="checkbox" value="group3" />group 3</label>
</form>

Answer 2

$('input').click(function(){
 input = $(this);
 classVal = "." + input.val();
 elements = $(classVal );

 if (input.is(':checked')) {
     elements.css("background-color", "#FFFF00");
     elements.css("opacity", 1);
 } else {
     elements.css("background-color", "");
     elements.css("opacity", 0.33);
 }
});

Che dire di questo? Basta aggiungere un'altra attr CSS per gli elementi.

Answer 3

Forse mi manca qualcosa, ma perché non appena messo subito dopo la linea che cambia il colore di sfondo?

$('input').click(function(){
    input = $(this);
    classVal = "." + input.val();
    elements = $(classVal );

    if (input.is(':checked')) {
        elements.css("background-color", "#FFFF00");
        elements.fadeTo("slow", 1.0);
    } else {
        elements.css("background-color", "");
        elements.fadeTo("slow", 0.33);
    }
});

Answer 4

Inizialmente anche si desidera che le li gli elementi non selezionati per essere sbiadito. A tale scopo è necessario utilizzare ogni funzione (). Si prega di provare quanto segue. Ho controllato il codice e sta lavorando bene.

$('input').click(function() {

            $('input').each(function(index) {

                input = $(this);
                classVal = "." + input.val();
                elements = $(classVal);

                if (input.is(':checked')) {
                    elements.css("background-color", "#FFFF00");
                    elements.fadeTo("slow", 1.0);

                } else {
                    elements.css("background-color", "");
                    elements.fadeTo("slow", 0.33);
                }
            });
        });