Tout en travaillant sur la conformité des boutons, je vais ajouter plusieurs événements de clé, mais avec différentes classes et identifiaires déclenchant l'ONCLICK à l'intérieur de la condition si vous appuyez sur la touche Entrée. Je veux mettre toutes les différentes méthodes sous une seule fonction et réutiliser que J'apprends à écrire des fonctions, etc., donc pardon mon novice-ness ici P> $(".targetClass").keydown(function (e) {
if (e.keyCode === 13) {
// do the click/navigate/showhide...
}
});
3 Réponses :
Vos opérations de clic semblent tomber dans un certain nombre de catégories. Si vous ajoutez l'opération à l'élément, votre code peut déterminer quoi faire sans savoir ce que cet élément réel est, par exemple: vous pourrait em> puis gérer ces Dans une seule fonction: p> ou (préféré), vous pouvez ensuite ajouter des gestionnaires par opération: p> Selon les opérations et votre préférence, vous pouvez utiliser des classes pour celles-ci (qui peuvent être plus efficaces pour le sélecteur, non testées, éventuellement micro-optimisation), par exemple: p> Ensuite, des gestionnaires similaires de l'événement fractionné: p> Utilisation des moyens de gestionnaires distincts s'étendant à une nouvelle fonctionnalité affectera moins probablement le code existant (c'est-à-dire une maintenabilité améliorée). Si vous souhaitez ajouter une nouvelle opération: P>
$(".targetClass.trigger-show").click(function() {
$($(this).data("trigger")).toggle();
}
Utilisez quelque chose comme celui-ci
p>
function KeyDown(ele, type) {
var $selector = null;
if (type == 'cssClass') {
$selector = $("." + ele);
else if (type == "id")
$selector = $("#" + ele);
}
$selctor.on("keydown", function(e) {
if (e.keyCode === 13) {
switch (ele)
case "classOne":
hideShow('classOne');
return false;
break;
case "iDOne":
navigateTo('somepage');
break;
case "classTwo":
$(".classTwo").trigger("click");
break;
case "classThree":
navigateTo('anotherpage');
break;
case "classFour":
$(".classFour").trigger("click");
break;
case "idTwo":
$("#idTwo").trigger("click");
break;
return false;
}
})
$(function(){
KeyDown('classOne', 'cssClass');
KeyDown('iDOne', 'id') ;
KeyDown('classTwo', 'cssClass');
KeyDown('classThree', 'cssClass');
KeyDown('classFour', 'cssClass');
KeyDown('idTwo', 'id') ;
})Merci, @sagar. Cela fonctionne partiellement au fur et à mesure que la fonction de clé ne se déclenche qu'après quelques clics. Cela ne fonctionne pas au premier clic de l'élément.
L'avez-vous initialisé pour chaque DOM? Ci-dessus n'est qu'un exemple et j'ai un événement initialisé juste pour classone code> et idtwo code>.
Oui, je l'ai ajouté dans l'élément HTML.
Non, vous l'initialisez dans ONKEYDOOD code> événement lui-même. Initialisez-le dans sur la fonction code>. S'il vous plaît regarder la réponse mise à jour. Supprimer OneKedown code> dans le HTML.
Vous pouvez probablement utiliser un tableau des attributs à la boucle:
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="classOne" >classOne <input id="iDOne">iDOne