0
votes

Créer une fonction de clé commune avec ID / classe

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 xxx pré>

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...
        }
     });


0 commentaires

3 Réponses :


1
votes

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: xxx pré>

vous pourrait em> puis gérer ces Dans une seule fonction: p> xxx pré>

ou (préféré), vous pouvez ensuite ajouter des gestionnaires par opération: p> xxx pré>


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> xxx pré>

Ensuite, des gestionnaires similaires de l'événement fractionné: p> xxx pré>


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


0 commentaires

0
votes

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') ;

})


4 commentaires

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 et idtwo .


Oui, je l'ai ajouté dans l'élément HTML.

...


Non, vous l'initialisez dans ONKEYDOOD événement lui-même. Initialisez-le dans sur la fonction . S'il vous plaît regarder la réponse mise à jour. Supprimer OneKedown dans le HTML.



0
votes

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


0 commentaires