Jquery à Hightlight éléments dans une liste

Question

J'ai une liste 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> 

et un ensemble de cases qui correspondent aux noms de classe

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

Ce que je veux arriver est que lorsqu'un l'utilisateur clique sur une case à cocher pour la "cocher", toutes les lignes qui ne sont pas vérifiées sont fadedOut (change l'opacité) puis toutes les lignes qui ont la classe correspondant à la valeur de la case sont surlignées (couleur d'arrière-plan changée en jaune). Ainsi, par exemple, si l'on cliquait sur le groupe 3, les éléments 4 et 6 seraient mis en surbrillance. Ensuite, si le groupe 2 était cliqué, l'élément 3 serait mis en surbrillance (les éléments 4 et 6 resteraient en surbrillance). Si le groupe 2 n'était pas coché, l'élément 3 disparaîtrait, bien que les éléments 4 et 6 resteraient en surbrillance.

Le code que j'ai en ce moment est:

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

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

Cela gère la mise en avant, mais ne fait pas le fading des éléments non contrôlés. Je sais que je peux changer l'opacité en utilisant css ("opacity", 0.33) ou fadeTo ("slow", 0.33) mais je ne sais pas comment gérer cela dans le code et où le mettre.

Si l'un de mon autre code peut être tondu aussi s'il vous plaît laissez-moi savoir

Merci

Answer 1

Le code 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}); 
    }); 
}); 

Ce 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

Peut-être que je manque quelque chose, mais pourquoi ne pas mettre tout juste après la ligne qui change la couleur de fond ?

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

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

Qu'en est-ce? Ajoutez juste un autre attr CSS aux éléments.

Answer 4

Dans un premier temps aussi vous voulez que les li éléments non sélectionnés à décolorées. Pour ce faire, vous devez utiliser chaque fonction(). S'il vous plaît essayez ce qui suit. J'ai vérifié ce code et ça fonctionne bien.

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