1
votes

Comment autoriser un bouton à avoir deux comportements distincts en fonction de ses classes?

Dans un modal bootstrap j'ai un bouton, les propriétés de ce bouton changent en fonction de certaines données, de sorte que le bouton peut avoir l'un des deux états.

State1

//Action1()
$(".action-complete-task").on("click", function (event) { //do action 1 }

//Action2()
$(".action-complete-task.action-2").on("click", function (event) { //do action 2 }

État 2

<button type="button" class="btn action-complete-task action-2">Action 2</button>

En fonction de l'état de ce bouton, je souhaite qu'il exécute la fonction javascript correspondante au clic, soit action1 () ou action2 .

J'ai essayé d'utiliser des sélecteurs CSS pour activer cela, mais le code que j'ai ci-dessous ne fonctionne pas. J'ai lu qu'en combinant deux classes dans un sélecteur JQuery sans espaces tels que .class1.class2 , le sélecteur effectuera un ET logique et ne sélectionnera que les éléments qui contiennent les deux class1 et class2.

Dans mon code ci-dessous, j'ai $ ("# EditTask .action-complete-task.action2") , qui ne devrait sélectionner que les éléments qui ont les deux classes .action-complete-task et .action-2 , mais dans ce scénario particulier, seule la fonction action1 () est exécuté.

<button type="button" class="btn action-complete-task">Action 1</button>

La raison pour laquelle je veux utiliser des classes pour déterminer le comportement et non des ID spécifiques est due au fait qu'il existe d'autres fonctions qui affectent la conception du bouton à l'aide du sélecteur de classe .action-complete-task , donc je veux que la conception du bouton soit effectuée quel que soit l'état dans lequel se trouve le bouton.

javascript jquery twitter-bootstrap

3 commentaires

Les écouteurs que vous configurez sont ajoutés au moment où cette ligne est exécutée. Ce qui signifie que si le bouton n'a pas la classe action-2 lorsque ce code jQuery s'exécute, la 2ème ligne finit par ne rien faire. Ce que vous devez faire à la place est d'ajouter un seul auditeur, et à l'intérieur, cochez $ (this) .hasClass ("action-2") (notez également que même si cela a fonctionné à votre façon, cliquez sur le bouton bouton dans l'état 2 déclencherait les deux fonctions, donc même le passage à $ (document) .on ("click", ".action-complete-task", ...) ne fonctionnerait pas)

$ (". action-complete-task"). not (". action-2"). on ("click" ... et vous devriez ajouter le code qui change les états

@johnSmith Comme je l'ai expliqué dans mon commentaire précédent, le test de classe doit être effectué au moment du clic, pas au chargement de la page.

4 Réponses :

3
votes

C'est facile à faire.

$(".action-complete-task").on('click', function(event){
  if($(this).hasClass('action-2')){
    //Do action 2
  }else{
    //Do action 1
  }
})

0 commentaires

0
votes

Il existe de nombreuses solutions pour cela, telles que: 1. Ajoutez la classe action-1 à votre premier bouton, de sorte que le gestionnaire soit

$(".action-complete-task").on("click", function(e) {
  const buttonClass = e.target.attr('class')
  if (class.includes('action-2') {
    // handle action 2
  } else {
    // handle action 1
  }
})

Faites-en un seul gestionnaire mais fournit une fonction qui vérifie la classe à l'intérieur

$(".action-complete-task.action-1").on("click", function (event) {})

1 commentaires

Comme je l'ai expliqué dans mon commentaire, la méthode (1) ne fonctionnera pas.

0
votes

JavaScript pur

Vérifiez si l'élément sur lequel vous avez cliqué contient la classe 'action-2'.

<button type="button" class="btn action-complete-task" onclick="performAction(this)">Action 1</button>
<button type="button" class="btn action-complete-task action-2" onclick="performAction(this)">Action 2</button>

performAction = (e) => {
  if (e.className.indexOf('action-2') === -1){
    console.log('Perform Action 1')
  }
  else {
    console.log('Perform Action 2')  
  }
}

0 commentaires

0
votes

dans la mesure où je comprends votre problème, vous pouvez lier l'événement à un élément parent qui existe sur pageload avant exemple document

$(document).on('click','.action-complete-task:not(.action-2)',function(){
//...1
})

$(document).on('click','.action-complete-task.action-2',function(){
//...2
})

de cette façon, il devrait fonctionner avec éléments insérés manuellement (DOM-Manipulation) et ne pas déclencher l'action1 (comme c'est le cas maintenant car votre .action-2 appartient également à .action-complete-task)

1 commentaires

Je préfère utiliser $ (body) .on ('click', '. Action-complete-task.action-2', function‌ () {//...2}) , mais Je pense qu'il n'y a pas de grande différence, je commente seulement pour faire savoir aux autres qu'il existe également cette option.