壓縮JavaScript代碼以顯示和隱藏多個div

Question

我可以更改html。

將鼠標懸停在ID為“ option1”的div上時，我想顯示ID為“ image1”的div。 將鼠標懸停在id為“ option2”的div上時，我想顯示id為“ image2”的div。 依此類推，直到到達結尾（ID為“ option4”的div）。 我知道可以使用CSS完成此操作，但在某些情況下，div的順序會導致css無法正常工作。

以下javascript可以正常工作，但我想對其進行壓縮，這樣我就不必在每次添加新的div時都對其進行硬編碼（最終，我將擁有25個以上的div來做到這一點）。

document.getElementById(option1).onmouseover = function() {
document.getElementById(image1).style.display = 'block';}

document.getElementById(option1).onmouseout = function() {
document.getElementById(image1).style.display = 'none';}

我已經嘗試過使用一些JavaScript，但是它似乎只顯示我懸停的每個選項的最后一個圖像。

 var numberOfImages = document.getElementsByClassName("product-image").length; var i; for (i = 1; i <= numberOfImages; i++) { var optionName = 'option' + i; var imageName = 'image' + i; document.getElementById(optionName).onmouseover = function() { document.getElementById(imageName).style.display = 'block'; } document.getElementById(optionName).onmouseout = function() { document.getElementById(imageName).style.display = 'none'; } } 

 .product-option-container { width: 66%; height: auto; float: left; margin-bottom: 30px; } .product-image-container { width: 33%; height: auto; float: right; text-align: center; background-color: #E1FDE2; } .product-option { width: 48%; height: auto; margin-right: 2%; margin-bottom:15px; float: left; background-color: #FFD1D1; } .product-image { width: 100%; height: auto; float: left; text-align: center; display: none; } .product-image img { width: auto; height: 325px; } 

 <div class="product-option-container"> <div class="product-option"><span id="option1">Option 1</span></div> <div class="product-option"><span id="option2">Option 2</span></div><br> <div class="product-option"><span id="option3">Option 3</span></div> <div class="product-option"><span id="option4">Option 4</span></div> </div> <div class="product-image-container"> <div id="image1" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Elite-Solar-Powered.png"></div> <div id="image2" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Echo-Solar-Powered.png"></div> <div id="image3" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Equip-Solar-Powered.png"></div> <div id="image4" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Ember-Solar-Powered.png"></div> </div> 

Answer 1

您的代碼缺少閉包。

並非真正需要：而是使用CSS選擇器選擇所有選項

然后使用數據屬性或按此處所示，將ID替換為圖片ID

 document.querySelectorAll(".product-option>span").forEach(function(opt) { opt.onmouseover = function() { document.getElementById("image"+this.id.replace("option","")).style.display = 'block'; } opt.onmouseout = function() { document.getElementById("image"+this.id.replace("option","")).style.display = 'none'; } }); 

 .product-option-container { width: 66%; height: auto; float: left; margin-bottom: 30px; } .product-image-container { width: 33%; height: auto; float: right; text-align: center; background-color: #E1FDE2; } .product-option { width: 48%; height: auto; margin-right: 2%; margin-bottom:15px; float: left; background-color: #FFD1D1; } .product-image { width: 100%; height: auto; float: left; text-align: center; display: none; } .product-image img { width: auto; height: 325px; } 

 <div class="product-option-container"> <div class="product-option"><span id="option1">Option 1</span></div> <div class="product-option"><span id="option2">Option 2</span></div><br> <div class="product-option"><span id="option3">Option 3</span></div> <div class="product-option"><span id="option4">Option 4</span></div> </div> <div class="product-image-container"> <div id="image1" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Elite-Solar-Powered.png"></div> <div id="image2" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Echo-Solar-Powered.png"></div> <div id="image3" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Equip-Solar-Powered.png"></div> <div id="image4" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Ember-Solar-Powered.png"></div> </div> 

Answer 2

正如您所寫的那樣，代碼的問題是，在循環的最后一次迭代之后， optionName和imageName是最后一次迭代的值，因此當您執行

document.getElementById(imageName)

例如， imageName是上次迭代的值。 如果將該部分包裝在閉合中：

var optionName = 'option' + i;
var imageName = 'image' + i;
(function (imageName, optionName) {
   //your code
})(imageName, optionName);

然后，值不會在閉包內部更改，因此它們將按預期工作：

 var numberOfImages = document.getElementsByClassName("product-image").length; var i; for (i = 1; i <= numberOfImages; i++) { var optionName = 'option' + i; var imageName = 'image' + i; (function(optionName, imageName) { document.getElementById(optionName).onmouseover = function() { document.getElementById(imageName).style.display = 'block'; } document.getElementById(optionName).onmouseout = function() { document.getElementById(imageName).style.display = 'none'; } })(optionName, imageName); } 

 .product-option-container { width: 66%; height: auto; float: left; margin-bottom: 30px; } .product-image-container { width: 33%; height: auto; float: right; text-align: center; background-color: #E1FDE2; } .product-option { width: 48%; height: auto; margin-right: 2%; margin-bottom:15px; float: left; background-color: #FFD1D1; } .product-image { width: 100%; height: auto; float: left; text-align: center; display: none; } .product-image img { width: auto; height: 325px; } 

 <div class="product-option-container"> <div class="product-option"><span id="option1">Option 1</span></div> <div class="product-option"><span id="option2">Option 2</span></div><br> <div class="product-option"><span id="option3">Option 3</span></div> <div class="product-option"><span id="option4">Option 4</span></div> </div> <div class="product-image-container"> <div id="image1" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Elite-Solar-Powered.png"></div> <div id="image2" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Echo-Solar-Powered.png"></div> <div id="image3" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Equip-Solar-Powered.png"></div> <div id="image4" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Ember-Solar-Powered.png"></div> </div> 

Answer 3

 document.querySelectorAll(".product-option span").forEach(function(v, i) { v.onmouseover = function() { document.getElementById("image" + (i + 1)).style.display = 'block'; } v.onmouseout = function() { document.getElementById("image" + (i + 1)).style.display = 'none'; } }); 

 .product-option-container { width: 66%; height: auto; float: left; margin-bottom: 30px; } .product-image-container { width: 33%; height: auto; float: right; text-align: center; background-color: #E1FDE2; } .product-option { width: 48%; height: auto; margin-right: 2%; margin-bottom:15px; float: left; background-color: #FFD1D1; } .product-image { width: 100%; height: auto; float: left; text-align: center; display: none; } .product-image img { width: auto; height: 325px; } 

 <div class="product-option-container"> <div class="product-option"><span id="option1">Option 1</span></div> <div class="product-option"><span id="option2">Option 2</span></div><br> <div class="product-option"><span id="option3">Option 3</span></div> <div class="product-option"><span id="option4">Option 4</span></div> </div> <div class="product-image-container"> <div id="image1" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Elite-Solar-Powered.png"></div> <div id="image2" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Echo-Solar-Powered.png"></div> <div id="image3" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Equip-Solar-Powered.png"></div> <div id="image4" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Ember-Solar-Powered.png"></div> </div> 

Answer 4

我喜歡@mplungjan的答案，但是您是對的，代碼背后的邏輯是很有意義的。 問題在於JS如何處理var聲明。 簡而言之，在循環中聲明var會導致不直觀的結果，如果可以選擇，則應使用let代替。 我在您的代碼中用let替換了var ，它似乎可以正常工作。

 var numberOfImages = document.getElementsByClassName("product-image").length; var i; for (i = 1; i <= numberOfImages; i++) { let optionName = 'option' + i; let imageName = 'image' + i; document.getElementById(optionName).onmouseover = function() { document.getElementById(imageName).style.display = 'block'; } document.getElementById(optionName).onmouseout = function() { document.getElementById(imageName).style.display = 'none'; } } 

 .product-option-container { width: 66%; height: auto; float: left; margin-bottom: 30px; } .product-image-container { width: 33%; height: auto; float: right; text-align: center; background-color: #E1FDE2; } .product-option { width: 48%; height: auto; margin-right: 2%; margin-bottom:15px; float: left; background-color: #FFD1D1; } .product-image { width: 100%; height: auto; float: left; text-align: center; display: none; } .product-image img { width: auto; height: 325px; } 

 <div class="product-option-container"> <div class="product-option"><span id="option1">Option 1</span></div> <div class="product-option"><span id="option2">Option 2</span></div><br> <div class="product-option"><span id="option3">Option 3</span></div> <div class="product-option"><span id="option4">Option 4</span></div> </div> <div class="product-image-container"> <div id="image1" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Elite-Solar-Powered.png"></div> <div id="image2" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Echo-Solar-Powered.png"></div> <div id="image3" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Equip-Solar-Powered.png"></div> <div id="image4" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Ember-Solar-Powered.png"></div> </div> 

Answer 5

如果您沒有使用ES6並且不能使用let來聲明變量，那么您將需要立即調用一個函數（通過閉包），該函數將返回一個函數。 從IIFE返回的函數將是您分配的onmouseover和onmouseout事件處理程序。

對於仍在學習范圍界定如何在JavaScript中工作的新JavaScript開發人員而言，此問題是一個常見的陷阱。

下面是一個示例：

 var numberOfImages = document.getElementsByClassName("product-image").length; for (i = 1; i <= numberOfImages; i++) { var optionName = 'option' + i; document.getElementById(optionName).onmouseover = (function() { var imageName = 'image' + i; return function() { document.getElementById(imageName).style.display = 'block'; } })(); document.getElementById(optionName).onmouseout = (function() { var imageName = 'image' + i; return function() { document.getElementById(imageName).style.display = 'none'; } })(); } 

 .product-option-container { width: 66%; height: auto; float: left; margin-bottom: 30px; } .product-image-container { width: 33%; height: auto; float: right; text-align: center; background-color: #E1FDE2; } .product-option { width: 48%; height: auto; margin-right: 2%; margin-bottom: 15px; float: left; background-color: #FFD1D1; } .product-image { width: 100%; height: auto; float: left; text-align: center; display: none; } .product-image img { width: auto; height: 325px; } 

 <div class="product-option-container"> <div class="product-option"><span id="option1">Option 1</span></div> <div class="product-option"><span id="option2">Option 2</span></div><br> <div class="product-option"><span id="option3">Option 3</span></div> <div class="product-option"><span id="option4">Option 4</span></div> </div> <div class="product-image-container"> <div id="image1" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Elite-Solar-Powered.png"></div> <div id="image2" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Echo-Solar-Powered.png"></div> <div id="image3" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Equip-Solar-Powered.png"></div> <div id="image4" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Ember-Solar-Powered.png"></div> </div> 

這是一個介紹JavaScript閉包的頁面： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Closures