0
votes

jQuery: Comment réduire le nombre d'écouteurs d'événements?

J'ai une page avec quatre boutons différents et un code qui ressemble à ceci:

jQuery(".orange-button").on("click", () => {
   $(this).css("color", "orange");
   $(".display-img").addClass("#orange-color-image");
   ...
});

jQuery(".red-button").on("click", () => {
   $(this).css("color", "red");
   $(".display-img").addClass("#red-color-image");
   ...
});

jQuery(".blue-button").on("click", () => {
   $(this).css("color", "blue");
   $(".display-img").addClass("#blue-color-image");
   ...
});

...

Existe-t-il un moyen de condenser ce code? Ils font tous des choses très similaires, mais avec différentes classes et CSS appliqués.

javascript jquery html css design-patterns

2 commentaires

meilleure idée est de montrer une partie html de ce ... stackoverflow.com/help/how-to-ask

Vous avez un tas de problèmes dans votre code. Vous ne pouvez pas utiliser les fonctions fléchées et this et vous attendre à ce que ce soit l'élément sur lequel vous avez cliqué. Vous ajoutez également un # avec une classe ??

3 Réponses :

0
votes

Si ce sont tous des boutons, vous pouvez les regrouper en un seul comme suit.

jQuery('button').on('click', (event) => {
  const className = this.className;
  let color = '';
  if (className.includes('orange-button')) {
    color = 'orange';
  } else if (className.includes('red-button')) {
    color = 'red';
  } else if (className.includes('blue-button')) {
    color = 'blue';
  }
  $(this).css("color", color);
  $(".display-img").addClass(`#${color}-color-image`);
});

0 commentaires

2
votes

Utilisez simplement une boucle:

for (const color of ["orange", "red", "blue"]) {
    jQuery(`.${color}-button`).on("click", () => {
        $(this).css("color", color);
        $(".display-img").addClass(`#${color}-color-image`);
        // ...
    });
}

Ce code utilise des chaînes de modèle .

0 commentaires

1
votes

L'utilisation d'attributs de données est une pratique typique.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" data-color="blue">blue</button>
<button type="button" data-color="red">red</button>

<div class="display-img">XXXXXXXX</div>

.blue-color-image {
  background-color: blue;
}

.red-color-image {
  background-color: red;
}

jQuery("[data-color]").on("click", (evt) => {
   const btn = $(evt.target);
   const color = btn.data('color');
   console.log('x', color);
   btn.css("color", color);
   $(".display-img").addClass(color + "-color-image");
});

0 commentaires