Question

我设置了一个按钮来改变颜色。它显示classA，但不会更改为classB onclick。按钮似乎正在工作，所以我不确定这里有什么不起作用。我将不胜感激任何帮助。这是代码。

'<script>
    function toggleclass() {
var myElement = document.getElementById("id1");
if(myElement.className == "classA") {
    myElement.className = "classB";
} else {
    myElement.className="classA";
}
   }
  window.onload=function() {
document.getElementById("btn1").onclick =toggleClass;
   }
     </script>'

 HTML

'<td><div id="id1" class="classA"><img src="images/this.png" width="300" height="300"   


alt="ttemp"></div>

 <input type="button" id="btn1" value="ChangeColor" />   

            </td>'

 CSS

'.classA {
width: 300px;
border: 2px solid black;
background-color: green;
color: red;
padding: 3px;
  }
  .classB {
width: 300px;
border: 2px solid black;
background-color: blue;
color: red;
padding: 3px;
  }'

感谢您的帮助，

谢

Answer 1

兄弟，你甚至jQuery？ http://api.jquery.com/click/

$('#btn1').click(function(){
    $('#id1').toggleClass('classB');
});

Answer 2

我个人会做以下事情：

$('#btn1').on("click", function(e){
    e.preventDefault();
    $('#id1').toggleClass("classB");
});

阻止代码应该阻止页面跳转但仍然在切换类时执行操作

只需2美分

我有兴趣使用切换类来更改图像背景的颜色

2 个答案: