我正在嘗試使用以下方法更改我單擊的特定 div 的類：
let divs = document.querySelectorAll('.x');
function idk(){
Array.prototype.forEach.call(divs, function(element) {
element.classList.add('y');
Array.prototype.forEach.call(divs, function(element) {
element.classList.remove('x');
});
});
}.y{
transition: 0.5s;
transform: rotateY(180deg);
}<div id="d1">
<div id="c1" class="x" onclick="idk()">a</div>
<div id="c2" class="x" onclick="idk()">b</div>
<div id="c3" class="x" onclick="idk()">c</div>
</div>上面的這段代碼運行良好，但只能同時在所有divs 中，而不僅僅是我點擊的那個
uj5u.com熱心網友回復：
不需要ids 并且您不應該使用行內事件屬性onclick，而是將 JavaScript 與 HTML 分開并使用標準.addEventListener()。
此外，從 回傳的節點串列也不需要Array.prototype.forEach()as 。.forEachquerySelectorAll()
要獲取索引，只需使用.forEach()公開的索引引數：
顯示代碼片段
document.querySelectorAll(".x").forEach(function(element, index){
element.addEventListener("click", function(event){
console.log(index);
});
});<div class="x">a</div>
<div class="x">b</div>
<div class="x">c</div>但是，為了更改被點擊元素的類，您可以直接從事件處理程式中使用this關鍵字訪問被點擊元素：
document.querySelectorAll(".x").forEach(function(element, index){
element.addEventListener("click", function(event){
// Within a DOM element event handling function, the keyword
// "this" will reference the element that triggered the event.
this.classList.remove("x");
this.classList.add("y");
});
});.x { color: blue; }
.y {
color: red;
transition: 1.5s;
transform: rotateY(180deg);
}<div class="x">a</div>
<div class="x">b</div>
<div class="x">c</div>uj5u.com熱心網友回復：
- 不要使用
onclick行內屬性，JS 應該只在一個地方，那就是各自的標簽或檔案。改用addEventListener _ - 使用classList.toggle切換您的
"y"className
const divs = document.querySelectorAll('.x');
const divClickHandler = (evt) => {
const elThis = evt.currentTarget;
divs.forEach((el) => el.classList.toggle("y", el === elThis ));
console.log(elThis.id); // You don't need this
};
divs.forEach((el) => el.addEventListener("click", divClickHandler));.x { background: gray; }
.y { background: gold; }<div id="d1">
<div id="c1" class="x">1</div>
<div id="c2" class="x">2</div>
<div id="c3" class="x">3</div>
</div>從上面的示例中可以看出，您可以提取 ID，但不一定需要它。
uj5u.com熱心網友回復：
您可以將 div ID 傳遞給測驗函式，例如
<div id="c3" onclick="idk('c3')"></div>
那么您的測驗功能可能如下所示：
function test(id){
let foundDiv = document.getElementById(d)
foundDiv.classList.add('y');
foundDiv.classList.remove('x');
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/478798.html
標籤：javascript html css