web-dev-qa-db-ja.com

jquery変更ボタンの色onclick

質問に答えるときに使用する複数のボタンがあります。人がボタンをクリックすると、どのようにしてボタンの色を変えることができますか？私は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>

私はコーディングが本当に新しいので、どんな種類の助けも感謝します！

jqueryhtmlcssbuttondotnetnuke
11
Sean6971
$('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');
});
23
PSL

別のCSSクラスを作成するだけです。

.ButtonClicked {
    background-color:red;
}

次に、クリック時にクラスを追加します。

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

これは、 this jsFiddle で示すように、探していることを実行するはずです。 ?などのロジックに興味がある場合は、 三項（または条件付き）演算子 と呼ばれ、単純なifロジックを実行して、クラスはすでに追加されています。

クラスを切り替えることで、「オン/オフ」スイッチの感覚を持たせる機能を作成することもできます。

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

this jsFiddle で示されています。ただの思考の糧。

5
PlantTheIdea

CSSを使用：

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

このコードをページに追加します。

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

たとえば、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/

1
Wipster