jquery change button color onclick

Question

Ich habe mehrere Tasten, die ich benutze, wenn Leute eine Frage beantworten. Wie bekomme ich die Schaltflächen zum Ändern der Farben, wenn eine Person auf die Schaltfläche klickt? Ich weiß nicht, jquery, habe ich gesagt, dass es das Beste ist, für diese

Hier zu verwenden ist der Code, den ich für den HTML-Teil haben:

<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> 

Ich bin wirklich neu bei Codierung so dass jeder Art von Hilfe würde geschätzt werden!

Answer 1

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

Gebrauchsklasse, Demo: - http://jsfiddle.net/BX6Df/

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

wenn Sie die Farbe jeden Klick wechseln möchten, können Sie dies versuchen: - http://jsfiddle.net/SMNks/

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


.red 
{ 
    background-color:red; 
} 

aktualisiert Antwort für Ihren Kommentar .

http://jsfiddle.net/H2Xhw/

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

Answer 2

Ich würde nur eine separate CSS-Klasse erstellen:

.ButtonClicked { 
    background-color:red; 
} 

Und dann die Klasse auf Klick hinzufügen:

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

Dies sollte das tun, was Sie suchen, von this jsFiddle zeigt. Wenn Sie neugierig auf die Logik mit der ? und so sind, heißt es ternary (or conditional) operators, und es ist nur eine prägnante Möglichkeit, die einfache if-Logik zu tun, um zu überprüfen, ob die Klasse bereits hinzugefügt wurde.

Sie können auch die Fähigkeit, erstellen ein haben „on/off“ -Schalter fühlen durch die Klasse Makeln:

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

Dargestellt von this jsFiddle. Nur zum Nachdenken.

Answer 3

Verwenden css:

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

Answer 4

Fügen Sie diesen Code auf Ihre Seite:

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

Answer 5

Sie haben die jquery Rahmen in Ihrem Dokument Kopf von einem CDN enthalten zum Beispiel:

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

Dann müssen Sie ein eigenes Skript zum Beispiel umfassen:.

(function($) { 

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


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

})(jQuery); 

Dieser Teil ist eine Abbildung des $ zu jQuery, so dass es tatsächlich ist jQuery ('Wähler') function();

(function($) { 

})(jQuery); 

Hier können Sie api von jquery finden sterben, in der alle Funktionen aufgeführt sind, mit Beispielen und Erklärungen. http://api.jquery.com/