我正在尝试使用 CSS 设计公交车座位安排,并使用 CSS 完成了悬停部分,但下一部分是选择座位,点击后背景图像应该会发生变化。 我为每个座位使用不同的 ID。使用以下代码
.myClass {
background:url('images/transparent-backgro-seatlayout.gif') 0 -60px;
}
document.getElementById("w1").className += " myClass";
但这行不通。由于我对java脚本了解不多,我无法解决我的问题。请帮忙。
最佳答案
如果您使用 jQuery,这可能很简单:
$("#w1").click(function() {
$(this).addClass('myClass');
});
请注意,通过使用 $(this) 您会自动引用被单击的元素。这很方便,因为您提到有许多可点击的席位,每个席位都有一个唯一的 ID。与其手动为每个可点击的座位(“w1”、“w2”等)创建事件处理程序,不如使用匹配任何座位的选择器更简单。假设所有座位都在 ID 为“seats”的标签内,并且每个座位都用“a”标签表示:
$("#seats a").click(function() {
$(this).addClass('myClass');
});
所以你的标记应该是这样的:
<div id="seats">
<a id="w1">seat 1</a>
<a id="w2">seat 2</a>
....
</div>
此外,如果您希望用户能够再次单击座位以取消选择它,请使用 toggleClass 而不是 addClass:
$("#seats a").click(function() {
$(this).toggleClass('myClass');
});
请注意,您不必使用 jquery 来实现所有这些。您可以使用原始 javascript 来完成,也可以使用不同的 javascript 框架。但如果您有选择,jquery 会使编码变得容易得多。
关于javascript - CSS 的点击功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10083966/