13

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

私はコーディングが初めてなので、どんな種類の助けもいただければ幸いです!

4

5 に答える 5

5

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

.ButtonClicked {
    background-color:red;
}

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

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

これは、この jsFiddleで示されているように、探していることを行う必要があります。などのロジックに興味がある場合は、三項 (または条件付き) 演算子?と呼ばれ、単純な if ロジックを実行してクラスが既に追加されているかどうかを確認する簡潔な方法です。

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

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

この jsFiddleによって表示されます。考えるだけの食べ物です。

于 2013-04-26T16:19:47.507 に答える