2017-10-17 2 views
0

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:Simplifier jquery/javascript pour les liens 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.

+1

d'où 'href' viendra? –

+1

'$ (" input [type = 'checkbox]' "). Click (....)' Aussi, qu'est-ce que cela a à voir avec "minification", que le refactoring du code pour le condenser à la plus petite quantité de octets? –

+0

'href' est un remplaçant pour le lien. Cela peut donc être quelque chose comme '/ products/valves /' quand on clique dessus, mais il y a un certain nombre de cases à cocher, chacune allant à un endroit différent, je pensais que l'exemple utiliserait des liens réels. –

Répondre

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

+0

Cela semble bon. Je vais tester, mais il est logique que cela fonctionnerait probablement. –

+0

Pouvez-vous fournir un violon js de votre code afin que je puisse le déboguer à partir de là? –

+0

Cela a résolu mon problème. Je vous remercie! La première fois que j'ai eu affaire à DRY, cela m'a beaucoup aidé à aller de l'avant. –

1

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') 
}); 
+0

Ai-je placé mon href au mauvais endroit? Voulez-vous dire que je dois le placer ailleurs et le cibler avec le code que vous avez fourni? –