Jquery couleur de fond de li et case à cocher

Je veux changer la couleur d'arrière-plan de l'élément li à modifier lorsqu'on clique dessus. Ainsi, lorsque l'utilisateur clique sur le premier li, la couleur d'arrière-plan devrait être en rouge, et quand il clique sur le second, le second devrait passer au rouge, mais le premier devrait passer au blanc.Jquery couleur de fond de li et case à cocher

En résumé, la couleur d'arrière-plan du li sélectionné doit être modifiée pour indiquer qu'il est en surbrillance.

La case à cocher doit également être cochée pour seulement li sélectionné. J'ai essayé de faire comme ci-dessous. Mais il change pour tous les li .. S'il vous plaît aider.

<html> 
<head> 
<script type="text/javascript" src="http://editor.webyana.com/javascripts/client_scripts/potential/jquery.js"></script> 
<script> 
$(document).ready(function() { 
    $("li.gc").click(function() { 

     $("li.gc").each(function (i) { 
      $("li.gc[i]").css({ 
       backgroundColor: '#FFA700' 
      }); 
     }); 
     $(this).css({ 
      backgroundColor: '#000000' 
     }); 

     $(this).children("input[type=checkbox]").attr('checked', 'checked'); 

     //do something with the sortcat 
    }); 

}); 
</script> 
</head> 
<body> 
    <ul> 
     <li class="gc"> 
      <input type="checkbox" /> 
      Check1 
      <a>Link1</a> 
     </li> 
     <li class="gc"> 
      <div> 
       <input type="checkbox" /> 
       Check2 
       <a>Link2</a> 
      </div> 
     </li> 
     <li class="gc"> 
      <div> 
       <input type="checkbox" /> 
       Check3 Link3 
      </div> 
     </li> 
     <li class="gc"> 
      <div> 
       <input type="checkbox" /> 
       Check4 Link4 
      </div> 
     </li> 
    </ul> 
</body> 

</html>

Source

2011-05-14 rubyist

Plutôt que de déblayage avec la fonction css, je vous suggère d'utiliser les classes en CSS et simplifier la logique un peu. Voir this fiddle.

// store this for later use. only search once! 
var items = $("li.gc"); 

items.click(function() { 
    // again, only need to run this once - cache the selector! 
    var item = $(this); 
    // remove the selected class and uncheck all the inputs for all items 
    items.removeClass("selected").find("input").removeAttr("checked"); 
    // add the selected class and check the input 
    item.addClass("selected").find("input").attr('checked', 'checked'); 
});

Et juste pour votre référence, voici votre idée de code d'origine (en utilisant .css()) élargi:

$("li.gc").click(function() { 
    $("li.gc").css({ 
     backgroundColor: '#FFA700' 
    }); 
    $(this).css({ 
     backgroundColor: '#000000' 
    }); 

    $(this).children("input[type=checkbox]").attr('checked', 'checked'); 

    //do something with the sortcat 
});

Lorsque vous utilisez .css() comme un poseur, il fonctionne sur tous les articles correspondants.

Source

2011-05-14 09:43:32 gnarf

d'abord définir une classe "rouge" dans votre css.

.red { 
     background-color: red; 

    } 


$("li.gc").click(function() { 
    // Then on-click remove it from all at first 
    $("li.gc").removeClass("red"); 
    // and add it to the clicked one 

    $(this).addClass("red"); 

});

Source

2011-05-14 09:12:30

bt gc est le nom de classe que j'ai défini pour tous les éléments li .. alors comment est-il possible ?? – rubyist

@ user662503: les éléments peuvent avoir plusieurs classes. – Domenic

Uku La réponse de Loskit est dans la bonne direction. Mais, pour expliquer pourquoi votre idée originale ne fonctionne pas, c'est parce que li.gc[i] n'est pas le sélecteur CSS correct: il recherche tous les tags <li /> avec la classe gc et qui ont un attribut nommé i, puisque [foo] est le sélecteur CSS pour les tags qui avoir l'attribut foo.

Voici un code qui ne probablement ce que vous voulez:

$(document).ready(function() { 
    $("li.gc").click(function() { 
     // Reset all <li />s with the .gc class to white 
     $("li.gc").css("background-color", "white"); 

     // But now set the one that was just clicked to red. 
     $(this).css("background-color", "red"); 

     // Similarly uncheck all checkboxes 
     $("li.gc input[type=checkbox]").attr("checked", false); 

     // But now check the checkbox child of the just-clicked <li />. 
     $(this).find("input[type=checkbox]").attr("checked", true); 
    }); 
});

Source

2011-05-14 09:29:01 Domenic

Vraiment Merci beaucoup mec ... Cela a fonctionné pour moi ... – rubyist

essayez-en-un avec un siblings, Obtenez les frères et sœurs de chaque élément dans l'ensemble des éléments adaptés, le cas échéant filtrés par un sélecteur.

$("li.gc").click(function(){ 
    $(this) 
    .css('background-color','#f00') 
    .siblings() 
    .css('background-color','#fff'); 
});

fiddle here

mise à jour:

utilisation radiobuttons pour la sélection unique

<li class="gc"> 
     <input type="radio" name="groupname" /> 
     Check1 
     <a>Link1</a> 
    </li> 
    <li class="gc"> 
     <div> 
      <input type="radio" name="groupname" /> 
      Check2 
      <a>Link2</a> 
     </div> 
    </li> 
    <li class="gc"> 
     <div> 
      <input type="radio" name="groupname" /> 
      Check3 Link3 
     </div> 
    </li> 
    <li class="gc"> 
     <div> 
      <input type="radio" name="groupname" /> 
      Check4 Link4 
     </div> 
    </li>

script comme

$(".gc").click(function(){ 
    $(this) 
    .css('background-color','#f00') 
    .siblings() 
    .css('background-color','#fff') 
    .end() 
    .find(':radio') 
    .attr('checked','checked'); 
});

fiddle here

Source

2011-05-14 09:36:23

Je pense toujours que l'utilisation de classes est meilleure que la mise en css ... mais le tour '.siblings()' est très agréable +1 ... – gnarf

Oh - et voici une mise à jour avec la fonctionnalité checkbox et la chaîne ... @jsfiddle.net/vr8yJ/1/ – gnarf

@gnarf, utilisez des radiobuttons pour cela, pas des cases à cocher –

Jquery couleur de fond de li et case à cocher

Répondre

Questions connexes