jQueryセレクターとifelseステートメントを使用してボタンの背景色を変更するにはどうすればよいですか？

受付中プログラミング

2024-12-24

小次郎又三郎

誰かがクリックしたときに、btn1の背景色を透明から緑色に変更する必要があります。ユーザーがボタンをもう一度クリックすると、btn1の背景色が緑色から透明に変わるはずです。条件が有効かどうかは次のとおりですか？


        if(('#btn1').css("background-color")== "green")


        function vote(str){
          
          if(str==1){
                
                if(('#btn1').css("background-color")== "green"){
              
                        $('#btn1').css("background-color","");
              
              
                }else{
              
                        $('#btn1').css("background-color","green");
              
              }
          
          }else{
          
            $('#btn2').css("background-color","red");
          }
        
        }
        </script>
        </head>
        <body>
        <button id="btn1" onclick="vote(1)" >Up Vote</button>
        <button id="btn2" onclick="vote(2)" >Down Vote</button>

回答一覧

いいえ-タイプミスがあります-$最初のにありませんif。つまり、if(('#btnと同じではありませんif($('#btn

小次郎又三郎

常にコンソールにエラーがないか確認してください（F12）btn1.css is not a function

小次郎又三郎

また、比較しているものを常に確認してください。console.log($('#btn1').css("background-color"))上記のように、Chromeでは= rgb(239, 239, 239)（最初は）で、rgb(0, 128, 0)に設定されている場合green。

小次郎又三郎

色ごとに個別のクラスを使用してから、toggleClass関数を使用して必要に応じてそれらを変更できます。


        $("button").on("click", (e) => {
          $(e.target).toggleClass("transparent green")
        })


        .green {
          background-color: green;
        }
        
        .transparent {
          background-color: rgba(0, 0, 0, 0);
        }


        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <button class="transparent">hello</button>

小次郎又三郎

1つのクラスを使用し、CSSのC部分を使用する必要があるだけです（ただし、そうでない場合は、クラスがここに移動する方法です）

小次郎又三郎

jQueryは、切り替えるクラスの配列もサポートしています。$(e.target).toggleClass(["transparent", "green"]);

小次郎又三郎

@EmielZuurbierは、文字列の場合は配列を必要としません:($(e.target).toggleClass("transparent green") 変数の場合は配列が便利です）

小次郎又三郎

cssを使用して目的の効果を実現し、addClassandtoggleClass関数を使用してクラスを切り替えたり追加したりできます。 addClass（）一致した要素のセット内の各要素に、指定されたクラスを追加します。トグルクラス（）クラスの存在または状態引数の値に応じて、一致した要素のセット内の各要素から1つ以上のクラスを追加または削除します。


        $("#btn1").on("click", function() {
          $(this).toggleClass('background-green');
        });
        
        $("#btn2").on("click", function() {
          $(this).addClass('background-red');
        });


        .background-red {
          background-color: red !important ;
        }
        
        .background-green {
          background-color: green !important;
        }
        
        .background-transparent {
          background-color: transparent;
        }


        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <button id="btn1" class="background-transparent">Up Vote</button>
        <button id="btn2">Down Vote</button>

小次郎又三郎

ログインして回答する