Question

我有一个这个html页面，每当点击类名为FreeSeat的元素时，我想改变那个div元素的颜色.Below是我的html页面

<html>
 <head>
  <title>
   QuickBus
  </title>
  <link type="text/css" rel="stylesheet" href="Seat.css">
 </head>
 <body>
  <div id="Bus">
   <div class="Row">
    <div class="FreeSeat"  ></div>
    <div class="FreeSeat"  ></div>
    <div class="ResSeat"  ></div>
    <div class="ResSeat"  ></div>
    <div class="ResSeat"  ></div>
   </div>
  </div>
 <body>
</html>

如果有人可以帮我解决这个问题，将会非常有帮助。

Answer 1

考虑到您要使用纯JS而不是任何库，您必须手动向您的类添加事件侦听器。它已经解决了similar problem here

var freeclass = document.getElementsByClassName("FreeSeat");
var myFunction_Free = function() {
    this.style.color = "blue";
}
for(var i=0;i<freeclass.length;i++){
    freeclass[i].addEventListener('click', myFunction_Free, false);
}

但是对于你的情况，这里是working fiddle

Answer 2

您可以使用以下方法按类更改元素的背景颜色：

file = File.read(record.file.path)

每个元素都可以通过索引引用：

const free_seat = document.getElementsByClassName('FreeSeat');
free_seat[0].style.backgroundColor = '#ff0';

因此，我们可以创建一个函数，只要将click事件传递给目标，就会调用该函数：

free_seat[0] // first div
free_seat[1] // second div

注意：您还可以使用const change_color = () => { this.style.backgroundColor = '#ff0'; }; for (let i = 0; i < free_seat.length; i++) { free_seat[i].addEventListener('click', change_color); }获取某个类的NodeList个元素。

Answer 3

JQuery对于这些事情来说是惊人的。

假设你有一个带有id＆＃39; box1＆＃39;

的div

UITableViewDelegate

用css设置样式

<div id='box1'></div>

使用JQuery，您可以进行此调用：

#box1 {
    width:100px;
    height:100px;
    background-color:white;
    border:1px solid black;
}

现在只要点击$( "#box1" ).click(function() { $('#box1').css('background-color', 'red'); });，颜色就会改变，你可以随心所欲地自定义。

Here是一个JSFiddle演示。

此外，由于您没有准确指定要更改的，在我的示例jquery中，它告诉浏览器当div有一个div时点击box1的ID，更改background-color的{{1}}，其ID为div，您可以更改任何内容。

如果你有一个box1标签，你可以在点击div时改变它，希望这有帮助！

Answer 4

为此，您可以简单地使用css focus伪类：

#foo:focus {
    background-color:red;
}

<div id="foo" tabindex="1">hello world!</div>

不要忘记设置tabindex。

单击时如何更改div元素的颜色？

4 个答案: