web-dev-qa-db-fra.com

jQuery addClass onClick

Le réglage est facile. Je veux pouvoir ajouter une classe à (dans ce cas) un bouton quand onClick-event est déclenché. Mon problème est que je n'ai pas trouvé le moyen de passer le bouton lui-même en tant que paramètre de la fonction. J'aimerais faire quelque chose comme:

<asp:Button ID="Button" runat="server" onclick="addClassByClick(this)"/>

Et puis une fonction javaScript ressemble à ceci:

function addClassByClick(button){
    button.addClass("active")
}

Je sais que j'ai beaucoup d'erreurs ici, mais c'est pourquoi je poste. J'ai essayé différents scénarios avec jQuery et sans jQuery mais je finis toujours avec une solution cassée (les clics cessent soudainement de passer, la classe n'est pas ajoutée, etc.), alors j'ai décidé de demander aux professionnels.

Toute suggestion à ce que je peux essayer? Merci de lire edit et toute l'aide!

javascriptasp.netjquery
23
Phil

Il doit s'agir d'un élément jQuery à utiliser .addClass() , il doit donc être encapsulé dans $() comme ceci:

function addClassByClick(button){
  $(button).addClass("active")
}

Une meilleure solution globale serait un script discret, par exemple:

<asp:Button ID="Button" runat="server" class="clickable"/>

Puis en jquery:

$(function() {                       //run when the DOM is ready
  $(".clickable").click(function() {  //use a class, since your ID gets mangled
    $(this).addClass("active");      //add the class to the clicked element
  });
});
43
Nick Craver

Utilisation de jQuery:

$('#Button').click(function(){
    $(this).addClass("active");
});

De cette façon, vous n'avez pas à polluer votre balise HTML avec les gestionnaires onclick.

10
Benjamin Wohlwend
$(document).ready(function() {
    $('#Button').click(function() {
        $(this).addClass('active');
    });
});

devrait faire l'affaire . à moins que vous ne remplissiez le bouton avec ajax . Dans ce cas, vous pourriez faire:

$('#Button').live('click', function() {...

Rappelez-vous également de ne pas utiliser le même identifiant plus d'une fois dans votre code html.

2
demux

Essayez de rendre votre css plus spécifique afin que le nouveau style (vert) soit plus spécifique que le précédent, afin que cela fonctionne pour moi!

Par exemple, vous pourriez utiliser dans css:

button:active {/*your style here*/}

Au lieu de (probablement ne fonctionne pas):

.active {/*style*/} (.active is not a pseudo-class)

J'espère que ça aide!

0
viridis
$('#button').click(function(){
    $(this).addClass('active');
});
0
kevtrout