jquery 更改按钮颜色 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16240892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery change button color onclick
提问by Sean6971
I have multiple buttons that I use when people answer a question. How would I get the buttons to change colors when a person clicks on the button? I do not know jquery, I have been told that it is the best thing to use for this
当人们回答问题时，我会使用多个按钮。当一个人点击按钮时，我如何让按钮改变颜色？我不知道 jquery，有人告诉我这是最好的用途
Here is the code I have for the html part:
这是我为 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>
I am really new at coding so any kind of help would be appreciated!
我对编码真的很陌生，所以任何形式的帮助都将不胜感激！
回答by PSL
$('input[type="submit"]').click(function(){
$(this).css('color','red');
});
Use class, Demo:- http://jsfiddle.net/BX6Df/
使用类，演示：- http://jsfiddle.net/BX6Df/
$('input[type="submit"]').click(function(){
$(this).addClass('red');
});
if you want to toggle the color each click, you can try this:- http://jsfiddle.net/SMNks/
如果你想每次点击切换颜色，你可以试试这个：- http://jsfiddle.net/SMNks/
$('input[type="submit"]').click(function(){
$(this).toggleClass('red');
});
.red
{
background-color:red;
}
Updated answer for your comment.
更新了您评论的答案。
$('input[type="submit"]').click(function(){
$('input[type="submit"].red').removeClass('red')
$(this).addClass('red');
});
回答by PlantTheIdea
I would just create a separate CSS class:
我只想创建一个单独的 CSS 类：
.ButtonClicked {
background-color:red;
}
And then add the class on click:
然后单击添加类：
$('#ButtonId').on('click',function(){
!$(this).hasClass('ButtonClicked') ? addClass('ButtonClicked') : '';
});
This should do what you're looking for, showing by this jsFiddle. If you're curious about the logic with the ?and such, its called ternary (or conditional) operators, and its just a concise way to do the simple if logic to check if the class has already been added.
这应该做你正在寻找的，通过这个 jsFiddle显示。如果您对 等的逻辑感到好奇?，它被称为三元（或条件）运算符，它只是执行简单 if 逻辑以检查是否已添加类的简洁方法。
You can also create the ability to have an "on/off" switch feel by toggling the class:
您还可以通过切换类来创建具有“开/关”开关感觉的能力：
$('#ButtonId').on('click',function(){
$(this).toggleClass('ButtonClicked');
});
Shown by this jsFiddle. Just food for thought.
由这个 jsFiddle显示。只是深思熟虑。
回答by nick
Use css:
使用CSS：
<style>
input[name=btnsubmit]:active {
color: green;
}
</style>
回答by Nelson
Add this code to your page:
将此代码添加到您的页面：
<script type="text/javascript">
$(document).ready(function() {
$("input[type='submit']").click(function(){
$(this).css('background-color','red');
});
});
</script>
回答by Wipster
You have to include the jquery framework in your document head from a cdn for example:
您必须从 CDN 将 jquery 框架包含在您的文档头中，例如：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
Then you have to include a own script for example:
然后你必须包含一个自己的脚本，例如：
(function( $ ) {
$(document).ready(function(){
$('input').click(function() {
$(this).css('background-color', 'green');
}
});
$(window).load(function() {
});
})( jQuery );
This part is a mapping of the $ to jQuery, so actually it is jQuery('selector').function();
这部分是 $ 到 jQuery 的映射，所以实际上是 jQuery('selector').function();
(function( $ ) {
})( jQuery );
Here you can find die api of jquery where all functions are listed with examples and explanation: http://api.jquery.com/
在这里您可以找到 jquery 的 api，其中列出了所有功能以及示例和说明：http: //api.jquery.com/
