JQuery Highlight Elemente in einer Liste

Question

Ich habe eine ol Liste:

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

und eine Reihe von Kontrollkästchen, die den Klassennamen entsprechen

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

Was ich will, geschehen ist, dass, wenn ein Benutzer klickt auf ein Kontrollkästchen ‚tick‘ es, alle li Zeilen, die nicht überprüft werden, sind fadedOut (ändern Opazität) und dann alle Zeilen, die die Klasse haben, die den Wert der Spiele Checkbox sind Textmarker (Hintergrundfarbe gelb geändert).

So zum Beispiel, wenn die Gruppe 3 wurde angeklickt, Punkt 4 und Punkt 6 würden hervorgehoben. Dann, wenn die Gruppe 2 wurde angeklickt Punkt 3 würde hervorgehoben werden (Artikel 4 und 6 würden hervorgehoben bleiben). Wenn Gruppe 2 wurde nicht abgehakt ist, Punkt 3 würde ausgeblendet, obwohl Artikel 4 und 6 würden hervorgehoben bleiben.

Der Code, den ich im Moment habe, ist:

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

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

Diese Griffe der Hervorhebung aber nicht tun, das Verblassen der ungeprüften Elemente. Ich weiß, ich kann die Opazität ändern mit CSS ( „Opazität“, 0,33) oder fadeTo ( „slow“, 0,33), aber nicht sicher, wie dies in dem Code zu handhaben und wo es zu setzen.

Wenn alle meine anderen Code kann auch in Ordnung gebracht werden, bis lass es mich wissen

Danke

Answer 1

Der jQuery-Code:

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

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

Was ist das? Fügen Sie einfach eine andere CSS-attr auf Elemente.

Answer 3

Vielleicht bin ich etwas fehlt, aber warum setzen sie nicht nur direkt nach der Zeile, die die Hintergrundfarbe ändert?

$('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

Zunächst wollen auch Sie die nicht ausgewählten li Elemente ausgeblendet werden. Zu diesem Zweck müssen Sie jede () Funktion verwenden. Bitte versuche folgendes. Ich habe diesen Code geprüft und es funktioniert gut.

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