jQuery 更改按鈕顏色 onclick

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');
});

使用類，演示：- 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');
});

Answer 2

我只想創建一個單獨的 CSS 類：

.ButtonClicked {
    background-color:red;
}

然后單擊添加類：

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

這應該做你正在尋找的，通過這個 jsFiddle顯示。 如果您對? 因此，它被稱為三元（或條件）運算符，它只是一種簡潔的方法來執行簡單的 if 邏輯來檢查是否已經添加了類。

您還可以通過切換類來創建具有“開/關”開關感覺的能力：

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

由這個 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 的 api，其中列出了所有功能以及示例和說明： http : //api.jquery.com/