例如我有这段代码
<div class="year">
<div class="month" id="month-1"></div>
<div class="month" id="month-2"></div>
<div class="month" id="month-3"></div>
<div class="month" id="month-4"></div>
<div class="month" id="month-5"></div>
<div class="month" id="month-6"></div>
<div class="month" id="month-7"></div>
<div class="month" id="month-8"></div>
<div class="month" id="month-9"></div>
<div class="month" id="month-10"></div>
<div class="month" id="month-11"></div>
<div class="month" id="month-12"></div>
</div>
<script>
document.querySelector(".month").addEventListener("click",function (){
//here I need to add some code
}
</script>
在“我需要添加一些代码”的地方，我想写这样的东西 仅使点击的元素颜色为蓝色
但如果我使用
this.style.color="blue"
它会将该样式添加到所有div.month。
例如，如果我点击ID为month-1的元素，我只希望该特定元素改变颜色。
**所有答案都是正确的！我如何选择所有这些都是正确的？ **
答案 0 :(得分：1)
我建议您使用隐藏的复选框和标签＆＃34; for＆＃34;属性已定义，因此您不需要javascript，仅限css：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="test1.js"></script>
<input type="button" id="btn1" value="ClickMe!" />
<script type="text/javascript">
var btn = document.getElementById("btn1");
btn.addEventListener("click",fun1,false);
function fun1(){
alert(test.tmp);
}
</script>
</body>
</html>demo here
如果您需要独家选择 - 请使用＆＃34; radio＆＃34;而不是＆＃34;复选框＆＃34;
答案 1 :(得分：0)
从本质上讲，您应该使用querySelectorAll并将click事件附加到每个事件。试试下面的代码片段。
elements = document.querySelectorAll(".month");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", function() {
this.style.backgroundColor = 'blue';
});
}<div class="year">
<div class="month" id="month-1">1</div>
<div class="month" id="month-2">2</div>
<div class="month" id="month-3">3</div>
<div class="month" id="month-4">4</div>
<div class="month" id="month-5">5</div>
<div class="month" id="month-6">6</div>
<div class="month" id="month-7">7</div>
<div class="month" id="month-8">8</div>
<div class="month" id="month-9">9</div>
<div class="month" id="month-10">10</div>
<div class="month" id="month-11">11</div>
<div class="month" id="month-12">12</div>
</div>
答案 2 :(得分：0)
就像Titus所说，querySelector只返回匹配的第一个元素，如果想获得与类名匹配的所有元素，我们使用getElementsByClassName。我们遍历返回的集合以绑定侦听器。
var Months = document.getElementsByClassName("month");
for (var i = 0; i < Months.length; i++) {
Months[i].addEventListener('click', function() { this.style.color = "#ff0000"; }, false);
}.month { height: 30px; }<div class="year">
<div class="month" id="month-1">1</div>
<div class="month" id="month-2">2</div>
<div class="month" id="month-3">3</div>
<div class="month" id="month-4">4</div>
<div class="month" id="month-5">5</div>
<div class="month" id="month-6">6</div>
<div class="month" id="month-7">7</div>
<div class="month" id="month-8">8</div>
<div class="month" id="month-9">9</div>
<div class="month" id="month-10">10</div>
<div class="month" id="month-11">11</div>
<div class="month" id="month-12">12</div>
</div>
答案 3 :(得分：0)
querySelector(".month")方法仅返回与选择器匹配的第一个元素。这意味着您只将点击监听器添加到具有班级div的第一个month。
为了获得具有此类（month）的所有元素，您可以使用querySelectorAll(...)函数。
以下是一个例子：
Array.from(document.querySelectorAll(".month")).forEach(function(element){
element.addEventListener("click", function (){
// In this context, you can use "element" or "this"
// to access the clicked element.
element.style.color = "blue";
});
});<div class="year">
<div class="month" id="month-1">First</div>
<div class="month" id="month-2">Second</div>
<div class="month" id="month-3">Third</div>
<div class="month" id="month-4">Fourth</div>
</div>
答案 4 :(得分：0)
如果你使用document.getElementsByClassName方法，然后循环遍历html集合中的每个元素（几个月），为每个元素添加事件监听器，它的效果非常好。见下文：
var months = document.getElementsByClassName("month")
for (var i = 0; i < months.length; i++) {
months[i].addEventListener("click",function (){
this.style.backgroundColor = "blue";
})
}
答案 5 :(得分：0)
您可以使用事件冒泡，通过将父div上的事件与class year绑定，并将具有事件目标的样式应用于子元素。因此，不必在每个子元素上绑定事件。
document.getElementsByClassName('year')[0].addEventListener('click', function(e) {
event.target.style.color = "#ff0000"
}, false); <div class="year">
<div class="month" id="month-1">1</div>
<div class="month" id="month-2">2</div>
<div class="month" id="month-3">3</div>
<div class="month" id="month-4">4</div>
<div class="month" id="month-5">5</div>
<div class="month" id="month-6">6</div>
<div class="month" id="month-7">7</div>
<div class="month" id="month-8">8</div>
<div class="month" id="month-9">9</div>
<div class="month" id="month-10">10</div>
<div class="month" id="month-11">11</div>
<div class="month" id="month-12">12</div>
</div>
答案 6 :(得分：0)
如何使用event.target调用函数。请提前提供帮助。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
padding: 30px;
text-align: center;
color: #fff;
font-size: 16px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="animadiv">
<p>I am animating ! :-) Div 1</p>
</div>
<div class="animadiv">
<p>I am animating ! :-) Div 2</p>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script>
<script>
function animationDiv() {
let animation = anime({
targets: 'div',
translateX: 200,
borderRadius: 100,
duration: 3000,
easing: 'linear',
direction: 'alternate'
});
}
// call function
var el = document.querySelector(".animadiv");
el.addEventListener("click", () => {
animationDiv();
});
</script>
</body>
</html>