1

我正在尝试使用 CSS 设计公共汽车座位安排，并使用 CSS 完成了悬停部分，但下一部分是选择单击后应该在背景图像中更改的座位。我为每个座位使用不同的 ID。使用以下代码

.myClass {
    background:url('images/transparent-backgro-seatlayout.gif') 0 -60px;
}

document.getElementById("w1").className += " myClass";

但这不起作用。由于我对java脚本不太了解，我无法解决我的问题。请帮忙。

4

3 回答 3

1

如果您使用 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 会使编码变得容易得多。

于 2012-04-10T06:27:26.003 回答
0

我建议你使用jQuery，它可以轻松实现这种事情。在你的情况下，你会有

 $("#w1").addClass("myClass");
于 2012-04-10T06:27:04.927 回答
0 
function changeImage(this){
   var el;
   el.classname = 'updatedImgClass';
}

当我们通过传递它的对象点击特定座位时触发上述函数

于 2012-04-10T12:24:55.407 回答