así que terminé un bootcamp de codificación hace un tiempo y todavía soy bastante novato en Javascript. Tengo problemas para encontrar una solución para crear código dinámico. Básicamente, tengo un ícono de correo electrónico debajo de cada empleado del equipo y, al pasar el mouse sobre el ícono, quiero que muestre su correo electrónico. Puedo codificar esto, pero tenemos varias páginas de equipo con una cantidad diferente de empleados en ellas.
<div class="member"> <img class="member-img" src="/assets/images/signage/example.png" alt=""> <h5 class="member-details">example</h5> <img onmouseover="showEmail()" onmouseleave="hideEmail()" class="email-icon" id="emailIcon2" src="/assets/images/email-asset-128-fix.png" alt=""> <h5 class="email-txt" id="emailTxt">example@email.com</h5> </div>Específicamente en esta página tengo otros 3 de estos divs para cada miembro del equipo. He puesto los iconos y los textos de correo electrónico h5s en matrices con el siguiente código.
const allIcons = []; $('.email-icon').each(function() { allIcons.push(this); }); console.log(allIcons); const allEmails = []; $('.email-txt').each(function() { allEmails.push(this); }) console.log(allEmails);Siendo más nuevo en Javascript, estoy luchando por descubrir qué debo hacer aquí y no puedo encontrar una solución similar en línea. Quiero que sea cuando paso el mouse sobre el ícono 1, muestra el correo electrónico 1 y así sucesivamente, lo mismo ocurre con onmouseleave. Solo quiero ocultar el h5 nuevamente. Mi css para el texto del correo electrónico está a continuación.
.email-txt { color: #474747; margin: 0; padding: 3px; transform: translateY(-260%); border-style: solid; border-radius: 5px; border-color: #474747; background-color: darkgray; color: black; display: none; }Probé esta solución Cambiar el color del ícono al pasar el mouse sobre el texto adyacente con jQuery
No sé si simplemente no lo estoy haciendo bien o qué, pero no puedo hacerlo funcionar.
Siéntase libre de juzgar mi código también, cuantos más consejos, mejor :). ¡Gracias!
Suponiendo que las direcciones de correo electrónico están en una matriz, todo lo que necesita hacer es generar una nueva imagen con su atributo de title establecido en la dirección de correo electrónico para cada entrada de la matriz:
["1@2.com", "3@4.com", "4@5.com", "5@6.com"].forEach(function(item){ let link = document.createElement("a"); // Create dynamic anchor link.href = "mailto:" + item; // Set link to go to array item let img = document.createElement("img"); // Create dynamic image img.alt = item; // Set the required alt attribute img.src = "https://illustoon.com/photo/dl/2751.png"; // Set image source img.title = item; // Set the tooltip for the image to the array item link.append(img); // Put the image in the anchor document.body.append(link); // Put the anchor on the page }); img { width: 30px; } <p>Hover over each icon to see the email addressNOTAS:
No almacene elementos HTML en una matriz; ya están en el DOM, por lo que no hay razón para mantener una segunda lista de ellos. Simplemente almacene los datos con los que desea trabajar en la matriz.
No use encabezados ( <h1> ... <h6> ) debido a cómo el navegador diseña el texto. Los encabezados son para definir la estructura del documento y son esenciales para aquellos que usan tecnologías de asistencia (como lectores de pantalla) para navegar por la web. Un <h5> solo se usaría para subdividir una sección <h4> existente. Y un <h4> solo debe usarse para subdividir una sección <h3> , y así sucesivamente.
Está utilizando JQuery en su código. Si bien no hay nada intrínsecamente malo con JQuery, se usa en exceso para resolver escenarios de codificación simples. Su situación aquí es muy simple y realmente no garantiza JQuery. Aprenda JavaScript muy bien antes de aprender las bibliotecas y marcos de JavaScript.
Puede usar CSS para manejar el efecto de desplazamiento, cuando sea posible, CSS es preferible a JS para manejar estos escenarios:
const employees = [{ email: "member1@email.com", img: "👮" }, { email: "member2@email.com", img: "👷" }, { email: "member3@email.com", img: "💂" }, { email: "member4@email.com", img: "🕵" }] employees.forEach(d => { const html = ` <div class="member"> <div class="member-img">${d.img} </> <h5 class="member-details">${d.email.match(/.*(?=@)/)}</h5> <div class="email-icon">✉️<h5 class="email-txt" id="emailTxt">${d.email}</h5></div> </div>` root.innerHTML += html }) #root { display: flex; justify-content: center; } .member { display: flex; flex-direction: column; align-items: center; } .email-icon { position: relative; font-size: 3rem; cursor: pointer; } .email-txt { display: none; position: absolute; top: 0; left: 0; transform: translateX(-50%); } .email-icon:hover .email-txt { display: block; } <div id="root"></div>