Question

你好我想做这样的事情

当我点击第一个表格列“one”时，我需要将其div颜色（）从绿色更改为红色。

当我再次点击它然后它应该变回蓝色。我怎样才能做到这一点？？我试过以下代码而不能正常工作

<html>
<head>
    <script>

$(".stileone").on("click", function() {
    $(this).css("background", "blue");
}); 

    </script>
</head>
<body>
    <style>

    table{
        width: 100%;
        height: 50px;
    }
    table td{
        width: 40px;
    }
    </style>
<table border="1">
<tr>
<td >   
<div class="stileone" >
    Div Content
</div>
</td>
<td></td>
<td></td>
</tr>

</table>
</body>
</html>

Answer 1

两种方式

将脚本加载到正文的末尾！

<script>
$(".stileone").on("click", function() {
  $(this).css("background", "blue");
});
</script>

或者，包裹在$(document).ready(function(){})

中

<script>
$(document).ready(function(){
  $(".stileone").on("click", function() {
    $(this).css("background", "blue");
  });
});
</script>

<强>原因

当脚本执行时，没有与之对应的DOM对象。所以，这就是处理程序没有附加到元素的原因。

对于你改变颜色，你可以做这样的事情。

$(".stileone").on("click", function() {
    if ($(this).css("background") == "blue")
      $(this).css("background", "red");
    else if ($(this).css("background") == "red")
      $(this).css("background", "green");
    else if ($(this).css("background") == "green")
      $(this).css("background", "blue");
});

如何通过单击表格列来更改div的颜色？

1 个答案: