Simplifier jquery/javascript pour les liens de la case à cocher

Question

J'ai écrit quelques lignes simples de code qui permettent des cases à cocher dans une navigation de barre latérale lorsqu'on clique dessus pour envoyer l'utilisateur à un lien spécifié. Les cases à cocher fonctionnent comme des filtres.
est ici le code HTML de la case à cocher:

<li class="inactive" aria-selected="false"> 
<input id="path1" type="checkbox" value="Accessories"> 
<a href="href">Accessories</a> 
</li> 

Et le jquery/javascript qui crée l'interaction:

$('#path1').click(function(){ 
       window.location='href'; //href would be a unique link 
    }); 

La question ne reçoit pas cette interaction pour travailler, je fais une problème de logique. La façon dont il est écrit est de cibler l'identifiant de la case à cocher. Ce n'est pas évolutif. 8 liens ne sont pas si mauvais, mais 500 liens, chacun unique, vous avez l'idée.

Existe-t-il une solution qui cible chaque case à cocher tout en permettant des liens uniques pour chacune? C'est à dire. ciblant la classe fait toutes les cases ont la même href, de sorte que ce n'est pas une option, etc.

Answer 1

vous pouvez effectuer les opérations suivantes:

<input type="checkbox" data-custom-click="href"> 

le code ci-dessus peut être répété autant de fois que vous avez besoin et vous permet d'avoir autant de nombre de cases que vous le souhaitez.

Remarque href dans le code HTML ci-dessus représente votre lien pour cette case à cocher spécifique.

Et le JavaScript d'un paquebot:

$("input[data-custom-click]").click(function(){ 
    window.location=$(this).attr("data-custom-click"); 
}); 

Le sélecteur input[data-custom-click] sélectionnera toutes vos cases de comportement personnalisés et la $(this) sélectionne la case cliqué.

Answer 2

En supposant que votre valeur href vient du lien qui suit l'entrée, vous pouvez utiliser:

$('li.inactive input[type="checkbox"]').click(function(){ 
    window.location = $(this).next('a').attr('href') 
});