例如我有这段代码

<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的元素,则只希望该特定元素更改颜色。

**所有答案都是正确的!如何选择所有要正确的东西? **

最佳答案

就像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>

10-05 20:40
查看更多