jQuery改变按钮颜色onclick答案

【问题标题】：jQuery change button color onclickjQuery改变按钮颜色onclick
【发布时间】：2013-04-26 16:17:25
【问题描述】：

当人们回答问题时，我会使用多个按钮。当一个人点击按钮时，我如何让按钮改变颜色？我不知道 jQuery，有人告诉我这是最好的选择。

这是我的 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>

我真的是编码新手，所以任何形式的帮助都将不胜感激！

【问题讨论】：

$('#answer').click( function() { $(this).css({ 'background' : '#00ff00' }); });请参阅 jQuery 文档以获取有关其功能和 API 的更多详细信息
我希望这不是家庭作业。所有这些重复的 ID 是怎么回事。这是今天连续4次。请注意，ID 应该是唯一的。
不，这不是家庭作业。我的一项工作是更新网站，我正试图通过网站的运作方式进入一个新的方向。我不是一个编码员！

标签： jquery html css button dotnetnuke

【解决方案1】：

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

使用类，演示：-https://jsfiddle.net/BX6Df/

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

如果你想在每次点击时切换颜色，你可以试试这个：- https://jsfiddle.net/SMNks/

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


.red
{
    background-color:red;
}

为您的评论更新了答案。

https://jsfiddle.net/H2Xhw/

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

【讨论】：

有没有办法，如果他们选择一个然后选择另一个第一个会回到原来的颜色？
这是我一直在寻找的东西，抱歉花了这么长时间才接受它，但我不得不稍微尝试一下才能让它在我的 Dnn 安装中工作！

【解决方案2】：

我只想创建一个单独的 CSS 类：

.ButtonClicked {
    background-color:red;
}

然后点击添加类：

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

这应该可以满足您的需求，由this jsFiddle 显示。如果您对 ? 之类的逻辑感到好奇，则将其称为 ternary (or conditional) operators，它只是一种简洁的方式来执行简单的 if 逻辑来检查该类是否已添加。

您还可以通过切换类来创建具有“开/关”开关感觉的能力：

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

由this jsFiddle 显示。值得深思。

【讨论】：

这正是我删除原始评论的原因，因为它不可避免地会导致争吵。没想到它会如此被动攻击，但我还是想避免它。我更新了我的答案，让我们握手并称之为正方形。

【解决方案3】：

使用 CSS：

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

【讨论】：

【解决方案4】：

将此代码添加到您的页面：

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

【讨论】：

使用这个时，如何让按钮保持读取状态？单击它然后移开它后，它会变回原来的颜色
JavaScript 仅在包含它的站点上运行。如果要保存信息，则需要将其存储在某个地方。例如像一个 cookie。

【解决方案5】：

您必须将 jquery 框架从 CDN 包含在您的文档头中，例如：

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

然后你必须包含一个自己的脚本，例如：

(function( $ ) {

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


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

})( jQuery );

这部分是$到jQuery的映射，所以实际上是jQuery('selector').function();

(function( $ ) {

})( jQuery );

在这里您可以找到 jquery 的 die api，其中列出了所有函数以及示例和说明：http://api.jquery.com/

【讨论】：