web-dev-qa-db-fra.com

jquery changer la couleur du bouton onclick

J'ai plusieurs boutons que j'utilise quand les gens répondent à une question. Comment pourrais-je obtenir les boutons pour changer les couleurs quand une personne clique dessus? Je ne sais pas jquery, on m'a dit que c'est la meilleure chose à utiliser pour cela

Voici le code que j'ai pour la partie html:

<div style="text-align: center;"><span style="line-height: 18px; font-family: Arial, Helvetica, sans-serif; font-size: 24px;">In the past three months, how often have you used marijuana?<br />
<p><input type="submit" value=" Never " name="btnsubmit" id="answer" style="width: 200px;" /></p>
<p><input type="submit" value=" Once or Twice " name="btnsubmit" id="answer" style="width: 200px;" /></p>
<p><input type="submit" value=" Monthly " name="btnsubmit" id="answer" style="width: 200px;" /></p>
<p><input type="submit" value=" Daily or Almost Daily " name="btnsubmit" id="answer" style="width: 200px;" /></p>
</span></div>
<div>
<p style="text-align: right;"><a onclick="window.open(this.href,'_parent');return false;" href="/mobile/Static2.aspx"><input type="submit" value=" Next " name="btnsubmit" style="width: 100px;" /></a></p>
</div>

Je suis vraiment nouveau en codage, toute aide serait la bienvenue!

jqueryhtmlcssbuttondotnetnuke
9
Sean6971
$('input[type="submit"]').click(function(){
$(this).css('color','red');
});

Utilisez la classe, Démo: - http://jsfiddle.net/BX6Df/

   $('input[type="submit"]').click(function(){
          $(this).addClass('red');
});

si vous voulez changer la couleur à chaque clic, vous pouvez essayer ceci: - http://jsfiddle.net/SMNks/

$('input[type="submit"]').click(function(){
  $(this).toggleClass('red');
});


.red
{
    background-color:red;
}

Réponse mise à jour pour votre commentaire. 

http://jsfiddle.net/H2Xhw/

$('input[type="submit"]').click(function(){
    $('input[type="submit"].red').removeClass('red')
        $(this).addClass('red');
});
21
PSL

Je voudrais juste créer une classe CSS séparée:

.ButtonClicked {
    background-color:red;
}

Et puis ajoutez la classe au clic:

$('#ButtonId').on('click',function(){
    !$(this).hasClass('ButtonClicked') ? addClass('ButtonClicked') : '';
});

Cela devrait faire ce que vous cherchez, montrant par this jsFiddle . Si vous êtes curieux de connaître la logique avec ? et autres, ses opérateurs sont appelés ternary (ou conditionnels) , et il s’agit simplement d’une manière concise de faire la simple logique si vérifier que la classe a déjà été ajoutée.

Vous pouvez également créer la possibilité d'activer/désactiver un commutateur en basculant la classe:

$('#ButtonId').on('click',function(){
    $(this).toggleClass('ButtonClicked');
});

Montré par this jsFiddle . Juste matière à réflexion.

5
PlantTheIdea

Utilisez css:

<style>
input[name=btnsubmit]:active {
color: green;
}
</style>
3
nick

Ajoutez ce code à votre page:

<script type="text/javascript">
$(document).ready(function() {
   $("input[type='submit']").click(function(){
      $(this).css('background-color','red');
    });
});
</script>
1
Nelson

Vous devez inclure le framework jQuery dans votre tête de document à partir d'un CDN, par exemple:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Ensuite, vous devez inclure un script propre, par exemple:

(function( $ ) {

  $(document).ready(function(){
      $('input').click(function() {
          $(this).css('background-color', 'green');
      }
  });


  $(window).load(function() { 
  });

})( jQuery );

Cette partie est une correspondance entre $ et jQuery, donc jQuery ('sélecteur'). Function ();

(function( $ ) {

})( jQuery );

Ici vous pouvez trouver l’API de jQuery où toutes les fonctions sont listées avec des exemples et des explications: http://api.jquery.com/

0
Wipster