我有一個 16x16 的小方塊網格。我添加了一個永久的“懸?！毙Ч?，當我將鼠標放在第一個框上時，它會變成紅色。但是，我想為頁面上的所有框添加相同的效果。我不知道該怎么做 - 我嘗試向整個頁面添加事件偵聽器并使用 target.nodeName 和 target.NodeValue，但無濟于事。我已經包含了工作版本，其中修復框在鼠標懸停時變為紅色。var n=16; //take grid column value as you wantconst bigContainer = document.querySelector('.bigContainer')for(var i = 1; i < n; i++) { bigContainer.innerHTML+='<div class="row">'; for(j = 0; j < n; j++) { bigContainer.innerHTML+='<div class="smallBox">'; }}const smallBox = document.querySelector('.smallBox');smallBox.addEventListener('mouseover', () => { smallBox.classList.add('permahover');});.smallBox { border: 1px solid black; width: 20px; height: 20px; display: inline-block;}.permahover { background: red;}h1 { text-align: center;}.bigContainer { text-align: center;}<h1>Etch-a-Sketch Assignment - The Odin Project</h1><div class="bigContainer"></div>
5 回答
白衣非少年
TA貢獻1155條經驗 獲得超0個贊
您遇到的直接問題是，這只是查詢，然后向一個元素添加事件偵聽器。
const smallBox = document.querySelector('.smallBox');
smallBox.addEventListener('mouseover', () => {
? ? smallBox.classList.add('permahover');
});
在上面的代碼部分中，querySelector僅返回第一個匹配元素。您可能正在此處查找querySelectorAll ，它返回匹配元素的NodeList。
您有兩個選擇（如果您想進一步重組代碼，也許還有其他選擇）。事實上，最簡單的方法是查詢所有單元格并向每個單元格添加事件偵聽器。
var n=16; //take grid column value as you want
const bigContainer = document.querySelector('.bigContainer')
for(var i = 1; i < n; i++) {
? ? bigContainer.innerHTML+='<div class="row">';
? ? for(j = 0; j < n; j++) {
? ? ? ? bigContainer.innerHTML+='<div class="smallBox">';
? ? }
}
const smallBoxes = document.querySelectorAll('.smallBox');
[...smallBoxes].forEach(smallBox => {
? smallBox.addEventListener('mouseover', () => {
? ? ? smallBox.classList.add('permahover');
? });
})
.smallBox {
? ? border: 1px solid black;
? ? width: 20px;
? ? height: 20px;
? ? display: inline-block;
}
.permahover {
? ? background: red;
}
h1 {
? ? text-align: center;
}
.bigContainer {
? ? text-align: center;
}
<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">
</div>
另一種選擇是使用您確定的事件委托。以下是您可以如何利用它。注意：對于像“鼠標懸?！边@樣的攻擊性事件，這種方法有點棘手，因為您可能會得到誤報目標（例如外部容器）。
var n=16; //take grid column value as you want
const bigContainer = document.querySelector('.bigContainer')
for(var i = 1; i < n; i++) {
? ? bigContainer.innerHTML+='<div class="row">';
? ? for(j = 0; j < n; j++) {
? ? ? ? bigContainer.innerHTML+='<div class="smallBox">';
? ? }
}
bigContainer.addEventListener('mouseover', e => {
? var target = e.target
? if (target !== bigContainer) {
? ? target.classList.add('permahover')
? }
})
.smallBox {
? ? border: 1px solid black;
? ? width: 20px;
? ? height: 20px;
? ? display: inline-block;
}
.permahover {
? ? background: red;
}
h1 {
? ? text-align: center;
}
.bigContainer {
? ? text-align: center;
}
<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">
</div>
翻過高山走不出你
TA貢獻1875條經驗 獲得超3個贊
您需要使用委托事件，因為加載頁面時頁面上并不存在所有小框（您可以在檢查器元素中找出只有第一個框具有事件偵聽器）。
所以你監聽整個容器（因為它總是在加載時的頁面上）
bigContainer.addEventListener('mouseover', () => {
// Code for checking if we hovered a small div & if yes applying the style
});
...然后與event.target（這將是懸停的小div）進行比較
if (event.target.matches('.smallBox')) {
event.target.classList.add('permahover');
}
var n=16; //take grid column value as you want
const bigContainer = document.querySelector('.bigContainer')
for(var i = 1; i < n; i++) {
bigContainer.innerHTML+='<div class="row">';
for(j = 0; j < n; j++) {
bigContainer.innerHTML+='<div class="smallBox">';
}
}
const smallBox = document.querySelector('.smallBox');
bigContainer.addEventListener('mouseover', () => {
if (event.target.matches('.smallBox')) {
event.target.classList.add('permahover');
}
});
.smallBox {
border: 1px solid black;
width: 20px;
height: 20px;
display: inline-block;
}
.permahover {
background: red;
}
h1 {
text-align: center;
}
.bigContainer {
text-align: center;
}
<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">
</div>
江戶川亂折騰
TA貢獻1851條經驗 獲得超5個贊
您應該將事件偵聽器設置為您的 DOM，并詢問觸發元素是否是屬于該特定類的元素之一。因此您可以使用該類處理每個元素。
var n = 16; //take grid column value as you want
const bigContainer = document.querySelector('.bigContainer')
for (var i = 1; i < n; i++) {
bigContainer.innerHTML += '<div class="row">';
for (j = 0; j < n; j++) {
bigContainer.innerHTML += '<div class="smallBox">';
}
}
document.addEventListener('mouseover', function(e) {
if (e.target && e.target.className == 'smallBox') {
var target = e.target;
target.classList.add('permahover');
}
});
工作js小提琴：https://jsfiddle.net/nwukf205/
希望我能幫助你:)如果你有問題就問
慕工程0101907
TA貢獻1887條經驗 獲得超5個贊
您可以使用forEach方法循環遍歷所有框并在每個框上添加事件監聽器。如果他們都有.smallBox課程，你可以這樣做：
const smallBoxes = document.querySelectorAll('.smallBox');
smallBoxes.forEach(box => box.addEventListener('mouseover', () => {
smallBox.classList.add('permahover');
}))
我希望它對你有幫助！
繁花如伊
TA貢獻2012條經驗 獲得超12個贊
let smallBoxes = document.querySelectorAll('.smallBox');
[...smallBoxes].forEach(el => {
el.addEventListener('mouseover', e => e.target.classList.add('permahover'));
});
- 5 回答
- 0 關注
- 192 瀏覽
添加回答
舉報
0/150
提交
取消