jquery代码未运行
我想在点击后更改div1的颜色。
当我单击div1时，它必须将其背景颜色更改为＃4A6B4C，但这不会发生。 善意的帮助。 谢谢
$(document).ready(function() { $('#div1').click(function() { $('#div1').toggleClass('change'); }); }); #div1{ background-color:#33C43C;width:40px;height:40px; border-radius:50%;color:white;text-align:center;font-size:30px;} #div2{text-align:center; color:white;background-color:#33C43C;width:40px;height:40px;border-radius:50%;font-size:30px;} #div1:hover{cursor:pointer;background-color:#4A6B4C;} #div2:hover{cursor:pointer;background-color:#4A6B4C;} .change{background-color:#4A6B4C;} /* div1 must change to this color */
S
M
使用id更新选择器或使用带有样式值的!important ，因为带有id的样式具有更高的优先级。
#div1.change{ background-color:#4A6B4C; }
$(document).ready(function() { $('#div1').click(function() { $('#div1').toggleClass('change'); }); });
#div1 { background-color: #33C43C; width: 40px; height: 40px; border-radius: 50%; color: white; text-align: center; font-size: 30px; } #div2 { text-align: center; color: white; background-color: #33C43C; width: 40px; height: 40px; border-radius: 50%; font-size: 30px; } #div1:hover { cursor: pointer; background-color: #4A6B4C; } #div2:hover { cursor: pointer; background-color: #4A6B4C; } #div1.change { background-color: #4A6B4C; } /* div1 must change to this color */
S
M
使用.on绑定事件。
另请参阅我在CSS中所做的更改。 你的风格需要更加具体。
$(document).ready(function() { $('#div1').on("click", function() { $(this).toggleClass('change'); }); });
#div1 { background-color: #33C43C; width: 40px; height: 40px; border-radius: 50%; color: white; text-align: center; font-size: 30px; } #div2 { text-align: center; color: white; background-color: #33C43C; width: 40px; height: 40px; border-radius: 50%; font-size: 30px; } #div1:hover { cursor: pointer; background-color: #4A6B4C; } #div2:hover { cursor: pointer; background-color: #4A6B4C; } #div1.op1.change { background-color: #4A6B4C; } /* div1 must change to this color */
S
M
你的JS代码是正确的。 一个好的做法是永远不要在css中使用id，因为id总是唯一的，并且这个id的css不可重用。 我已将您的代码从id更改为类。
S
M