回答受付が終了しました

ID非公開

2021/4/22 14:59

44回答

jsでクリックしてclassを追加するのですが、他のclassを追加した時には今までのclassを削除する方法を教えていただきたいです。

JavaScript | HTML、CSS32閲覧xmlns="http://www.w3.org/2000/svg">500

回答(4件)

0

毎回クラスを初期化してから色のクラスを追加すればOK 3色以上にもすぐに対応できるように改良したのがこれ <script> $(function() { $('.color_l').on('click', 'button', function(){ $('.color_test_01') .prop('class', 'color_test_01') .addClass($(this).data('color')); }); }); </script> <style> .red { background: red; } .blue { background: blue; } .green { background: green; } </style> <div class="color_test_01">ボックス</div> <ul class="color_l"> <li><button data-color="red">red</button></li> <li><button data-color="blue">blue</button></li> <li><button data-color="green">green</button></li> </ul>

.prop('class', 'color_test_01') .addClass($(this).data('color')); ここは .prop('class', 'color_test_01 ' + $(this).data('color')); でもいいけどなんか邪道な感じがする。

0

「今の状態」を保持していないと難しいですね (例) <style> .red{ background: red; } .blue{ background: blue; } </style> <div class="color_test_01"> ボックス </div> <ul class="color_l"> <li><button class="color-red">red</button></li> <li><button class="color-blue">ND-011</button></li> </ul> <script> var color = ""; document.querySelector('.color-red').addEventListener('click', function() { if (color === "blue") document.querySelector('.color_test_01').classList.remove('blue'); if (color !== "red") document.querySelector('.color_test_01').classList.add('red'); color = "red"; }); document.querySelector('.color-blue').addEventListener('click', function() { if (color === "red") document.querySelector('.color_test_01').classList.remove('red'); if (color !== "blue") document.querySelector('.color_test_01').classList.add('blue'); color = "blue"; }); </script>

0

toggleClassを使うのではなくて、.addClassと.removeClassを使って、redを追加したときにはblueを外し、blueにしたときにはredを外すような書き方にしたらどうですか。 $(".color-red").on("click",function(){ $(".color_test_01").addClass("red"); $(".color_test_01").removeClass("blue"); }); $(".color-blue").click(function() { $(".color_test_01").addClass("blue"); $(".color_test_01").removeClass("red"); });

0

$(function () { $(".color-red").on("click", function () { $(".color_test_01").removeClass("blue"); $(".color_test_01").toggleClass("red"); }); $(".color-blue").click(function () { $(".color_test_01").removeClass("red"); $(".color_test_01").toggleClass("blue"); }); });