javascript - 重构我的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>

标签： javascript

Answer 1

我使用 forEach 而不是 for 循环，因为我讨厌 for 循环并且代码有效

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);     
}