重構我的JavaScript代碼，我需要一種方法來防止鼠標滑過時文本重復出現？

Question

嗨，大家好，我是JS的初學者，有人可以幫助我，我創建了帶有3個國家/地區標志的HTML頁面。 當用戶將鼠標移到其中一個標志上時，在文本框中顯示國家/地區的名稱。 當他們將鼠標移離標志時，請清除文本框。

問題是，當我在標志上多次移動鼠標時，重復的文本也是如此。如何重構代碼，如此重復，我知道我必須使用foreach，但是如何？ 這是我的代碼

 const photo = Array.from(document.querySelectorAll('.flag-img')); const oman = document.querySelector('.oman'); const algeria = document.querySelector('.algeria'); const uae = document.querySelector('.uae'); const div1 = document.createElement("div1"); const div2 = document.createElement("div2"); const div3 = document.createElement("div3"); function countryName() { const text1 = document.createTextNode("Oman"); div1.appendChild(text1); div1.className = "box"; oman.appendChild(div1); } function countryAlg() { const text2 = document.createTextNode("Algeria"); div2.appendChild(text2); div2.className = "box"; algeria.appendChild(div2); } function countryUae() { const text3 = document.createTextNode("UAE"); div3.appendChild(text3); div3.className = "box"; uae.appendChild(div3); } function fadeOut() { div1.parentNode.removeChild(div1); } function fadeOut2() { div2.parentNode.removeChild(div2); } function fadeOut3() { div3.parentNode.removeChild(div3); } oman.addEventListener('mouseenter', countryName); algeria.addEventListener('mouseenter', countryAlg); uae.addEventListener('mouseenter', countryUae); oman.addEventListener('mouseleave', fadeOut); algeria.addEventListener('mouseleave', fadeOut2); uae.addEventListener('mouseleave', fadeOut3); 

 * { margin: 0; box-sizing: border-box; } header { text-align: center; } #flag { margin-top: 50px; display: flex; justify-content: space-around; } .flag-img img { width: 200px; } .box { text-align: center; padding: 20px; border: 2px solid black; width: 100px; height: 100px; background-color: transparent; color: black; /*position: absolute; left: 50px; top: 50px;*/ } 

 <header> <h1>Countries Flags</h1> </header> <div id="flag"> <div class="flag-img oman"> <img src="https://motionarray.imgix.net/preview-339277phSMy7aPd_0007.jpg?w=750&q=60&fit=max&auto=format"> </div> <div class="flag-img algeria"> <img src="https://img.freepik.com/free-photo/flag-of-algeria_1401-52.jpg?size=338&ext=jpg"> </div> <div class="flag-img uae"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Flag_of_the_United_Arab_Emirates.svg/255px-Flag_of_the_United_Arab_Emirates.svg.png"> </div> </div> 

Answer 1

我試圖用你的方式折射這個：

選擇所有元素

 var flags = document.getElementsByClassName("flag-img");

具有功能的Init元素。

for (var i = 0; i < flags.length; i++) {
(function () {
console.log(flags[i]);
    var elem = flags[i];
    flags[i].addEventListener('mouseenter', function() {
    showCountry(elem)
  }, false);
  flags[i].addEventListener('mouseleave', function() {
    fadeOut(elem)
  }, false);    
  }());
}

單功能淡出

 function fadeOut(a) {
    a.removeChild(a.lastChild);
}

單功能展示。

 function showCountry(a) {  
   const text = document.createTextNode(a.className.split(" ")[1]);
         var div = document.createElement("div");
   div.appendChild(text);
   div.className = "box";
        a.appendChild(div);     
}

  console.clear(); var flags = document.getElementsByClassName("flag-img"); for (var i = 0; i < flags.length; i++) { (function () { var elem = flags[i]; flags[i].addEventListener('mouseenter', function() { showCountry(elem) }, false); flags[i].addEventListener('mouseleave', function() { fadeOut(elem) }, false); }()); } function fadeOut(a) { a.removeChild(a.lastChild); } function showCountry(a) { const text = document.createTextNode(a.className.split(" ")[1]); var div = document.createElement("div"); div.appendChild(text); div.className = "box"; a.appendChild(div); } 

 * { margin: 0; box-sizing: border-box; } header { text-align: center; } #flag { margin-top: 50px; display: flex; justify-content: space-around; } .flag-img img { width: 200px; } .box { text-align: center; padding: 20px; border: 2px solid black; width: 100px; height: 100px; background-color: transparent; color: black; /*position: absolute; left: 50px; top: 50px;*/ } 

 <header> <h1>Countries Flags</h1> </header> <div id="flag"> <div class="flag-img oman"> <img src="https://motionarray.imgix.net/preview-339277phSMy7aPd_0007.jpg?w=750&q=60&fit=max&auto=format"> </div> <div class="flag-img algeria"> <img src="https://img.freepik.com/free-photo/flag-of-algeria_1401-52.jpg?size=338&ext=jpg"> </div> <div class="flag-img uae"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Flag_of_the_United_Arab_Emirates.svg/255px-Flag_of_the_United_Arab_Emirates.svg.png"> </div> </div> 

Answer 2

而不是for循環，我使用了forEach，因為我討厭循環並且代碼有效

var flags =  Array.from(document.getElementsByClassName("flag-img"));

   flags.forEach(function(value) {

      value.addEventListener('mouseenter', function() {
    showCountry(value)
  }, false);
       value.addEventListener('mouseleave', function() {
    fadeOut(value)
  }, false);    
    });

 function fadeOut(a) {
    a.removeChild(a.lastChild);
}


 function showCountry(a) {  
   const text = document.createTextNode(a.className.split(" ")[1]);
   var div = document.createElement("div");
   div.appendChild(text);
   div.className = "box";
        a.appendChild(div);     
}

Answer 3

我知道您正在嘗試學習Javascript，但這僅使用CSS即可輕松實現（並且在性能方面更好）：

 #flag { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } #flag img { max-width: 100%; } .flag-img::after { display: block; content: attr(data-country); opacity: 0; text-align: center; transition: opacity .4s ease-in-out; } .flag-img:hover::after { opacity: 1; } 

 <div id="flag"> <div class="flag-img" data-country="Oman"> <img src="https://motionarray.imgix.net/preview-339277phSMy7aPd_0007.jpg?w=750&q=60&fit=max&auto=format"> </div> <div class="flag-img" data-country="Algeria"> <img src="https://img.freepik.com/free-photo/flag-of-algeria_1401-52.jpg?size=338&ext=jpg"> </div> <div class="flag-img" data-country="United Arab Emirate"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Flag_of_the_United_Arab_Emirates.svg/255px-Flag_of_the_United_Arab_Emirates.svg.png"> </div> </div>