Question

当人们回答问题时，我会使用多个按钮。当人们点击按钮时，如何让按钮改变颜色？我不知道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 1

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

使用课程，演示： - http://jsfiddle.net/BX6Df/

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

如果您想在每次点击时切换颜色，可以尝试以下操作： - http://jsfiddle.net/SMNks/

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


.red
{
    background-color:red;
}

更新了评论的答案。

http://jsfiddle.net/H2Xhw/

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

Answer 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显示。只是值得深思。

Answer 3

使用css：

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

Answer 4

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

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

Answer 5

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

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

jquery更改按钮颜色onclick

5 个答案: