-1

嗨，我正在尝试做这样的事情

当我单击第一个表格列“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>
4

1 回答 1

3

两种方式

  1. 在正文的末尾加载脚本！

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

  2. 或者，包裹在$(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");
});
于 2013-11-13T20:27:28.220 回答