1

これは、javascript への私の最初の本格的なダイビングです。私はこれに何時間も取り組んできましたが、解決策が見つかりませんでした (ただし、多くのことを学びました)。

<script type="text/javascript">
function changeClass(){
    var NAME = document.getElementById("switcher");
    var currentClass = NAME.className;
    if (currentClass == "switch switch-blue") { 
        NAME.className = "switch switch-red";   
    } else {
        NAME.className = "switch switch-blue";  
    }
} 
 window.onload = function()
    {
        document.getElementById("switcher").addEventListener( 'click' , changeClass );
    }

</script>

HTMLは次のとおりです。

<div class="switch switch-blue" id="switcher">
 <input type="radio" class="switch-input" name="resp" value="1" id="respyes" checked>
 <label for="respyes" class="switch-label">YES</label>
 <input type="radio" class="switch-input" name="resp" value="2" id="respno">
 <label for="respno" class="switch-label">NO</label>
</div>

デフォルトは青色の背景です。彼らが「いいえ」を選択した場合、私はそれを赤くしたいです。「はい」をクリックすると青に戻ります。すべては css にあります。クラスを switch-blue から switch-red に手動で変更すると、機能します。現在、それはまったく何もしません。

ありがとうございました！

4

3 に答える 3

0

css クラスを追加すると、正常に動作しているように見えます。

ここにデモがあります。スタイルが欠けていると思います。スタイルを頭に追加して、それがうまくいくかどうかを確認してください。

<style>
.switch-blue{
    background:blue;
    color:#fff;
}
.switch-red{
    background:red;
      color:#fff;
}</style>

必要に応じてスタイルを自由に変更してください。

編集
ラジオ ボタンではなく div にイベント リスナーが接続されていることに気付きました。ボタンの代わりにdivをクリックすると背景が変わります。この更新された fiddleを参照してください。

于 2013-10-04T18:42:29.337 に答える