我希望 addToCartBar 在滑鼠進入任何網格項時顯示，它應該只出現在該網格項上，但它只是在第一個上作業。我究竟做錯了什么。
這是必要的ejs代碼
<div class="main-cont">
<div >
<div >
<div >ADD TO CART</div>
<div >
<img src="/NikeTiempo.png" alt="為什么 mouseenter 事件偵聽器只在第一個網格項上作業，而在其余項上不起作用">
</div>
<div >
<h5>Category</h5>
<h3 >Product Name</h3>
<h3 >$200</h3>
</div>
</div>
<div >
<div >ADD TO CART</div>
<div >
<img src="/AdidasAce.png" alt="為什么 mouseenter 事件偵聽器只在第一個網格項上作業，而在其余項上不起作用">
</div>
<div >
<h5>Category</h5>
<h3 >Product Name</h3>
<h3 >$200</h3>
</div>
</div>
<div >
<div >ADD TO CART</div>
<div >
<img src="/NikeTiempo.png" alt="為什么 mouseenter 事件偵聽器只在第一個網格項上作業，而在其余項上不起作用">
</div>
<div >
<h5>Category</h5>
<h3 >Product Name</h3>
<h3 >$200</h3>
</div>
</div>
<div >
<div >ADD TO CART</div>
<div >
<img src="/NikeTiempo.png" alt="為什么 mouseenter 事件偵聽器只在第一個網格項上作業，而在其余項上不起作用">
</div>
<div >
<h5>Category</h5>
<h3 >Product Name</h3>
<h3 >$200</h3>
</div>
</div>
<div >
<div >ADD TO CART</div>
<div >
<img src="/NikeTiempo.png" alt="為什么 mouseenter 事件偵聽器只在第一個網格項上作業，而在其余項上不起作用">
</div>
<div >
<h5>Category</h5>
<h3 >Product Name</h3>
<h3 >$200</h3>
</div>
</div>
<div >
<div >ADD TO CART</div>
<div >
<img src="/NikeTiempo.png" alt="為什么 mouseenter 事件偵聽器只在第一個網格項上作業，而在其余項上不起作用">
</div>
<div >
<h5>Category</h5>
<h3 >Product Name</h3>
<h3 >$200</h3>
</div>
</div>
</div>
</div>
這是它的JS
// //Hover Effect On Grid-Item
let cardItems = document.querySelectorAll('.grid-item');
let addToCartBar = document.querySelector('.add-to-cart')
for (let cardItem of cardItems) {
cardItem.addEventListener('mouseenter' , () => {
addToCartBar.style.display = "flex"
})
}
我知道上面的代碼回圈遍歷 cardItems 陣列，對于每個陣列，它都會應用該函式，所以我不知道我做錯了什么。任何幫助表示贊賞。謝謝你。
uj5u.com熱心網友回復：
問題是您實際上display每次都更改了第一個卡片專案按鈕的屬性，因為let addToCartBar = document.querySelector('.add-to-cart'). 這將遍歷 dom 并獲取第一個匹配元素。為了實作您想要的，您必須在每個內部進行查詢，cardItem如下所示：
// //Hover Effect On Grid-Item
let cardItems = document.querySelectorAll('.grid-item');
for (let cardItem of cardItems) {
cardItem.addEventListener('mouseenter' , () => {
let addToCartBar = cardItem.querySelector('.add-to-cart')
addToCartBar.style.display = "flex"
})
}
uj5u.com熱心網友回復：
對于發布的代碼，我相信這可以回答您的問題：
Document 方法 querySelector() 回傳檔案中與指定選擇器或選擇器組匹配的第一個元素。如果未找到匹配項，則回傳 null。
因此，您將事件偵聽器回呼應用于單個元素，您可以使用.querySelectorAll().
您也可以使用hovercss 選擇器來簡化您的代碼。您可以創建一個單獨的 css 檔案并將其鏈接到您的 js 檔案或將 snipet 直接添加到您的 javascript 代碼中。
.add-to-card:hover {
//add wanted behaviour here
}
您可以在此處閱讀有關 css 選擇器的更多資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/361096.html
標籤：javascript