Estoy trabajando en un menú a forma de lista, cada elemento de este menú tiene un icono del lado izquierdo y del lado derecho tiene un botón que permite al darle clic abrir una ventana para seleccionar varios iconos con el propósito de personalizar el icono que cada elemento tiene por default, aunque mi código actualmente al hacer esta selección cambia al mismo icono en todos los elementos de la lista y quería saber si existe alguna manera para poder modificar cada icono por separado. Este es el código con el que estoy trabajando https://jsfiddle.net/joelfa/c0o6sdLy/8/
// DROPDOWN
function toggleDropdown(button) {
var dropdownContent = button.nextElementSibling;
var allDropdowns = document.querySelectorAll('.dropdown-content');
allDropdowns.forEach(function(otherDropdown) {
if (otherDropdown !== dropdownContent && otherDropdown.classList.contains('show')) {
otherDropdown.classList.remove('show');
}
});
dropdownContent.classList.toggle("show");
}
var dropdownButtons = document.querySelectorAll('.dropbtn');
dropdownButtons.forEach(function(button) {
button.addEventListener('click', function() {
toggleDropdown(this);
});
});
window.onclick = function(event) {
if (!event.target.matches('.dropbtn') && !event.target.matches('.fa-ellipsis-vertical')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
// MODAL
document.addEventListener('DOMContentLoaded', function () {
var openModalBtns = document.querySelectorAll('.openModalBtn');
var closeModalBtn = document.getElementById('closeModalBtn');
var modal = document.getElementById('myModal');
function openModal() {
modal.style.display = 'block';
}
openModalBtns.forEach(function (btn) {
btn.addEventListener('click', openModal);
});
closeModalBtn.addEventListener('click', function () {
modal.style.display = 'none';
});
window.addEventListener('click', function (event) {
if (event.target === modal) {
modal.style.display = 'none';
}
});
});
// ELIMINAR FAVORITO
document.addEventListener('DOMContentLoaded', function () {
var eliminarButtons = document.querySelectorAll('.eliminarBtn');
eliminarButtons.forEach(function (button) {
button.addEventListener('click', function () {
var elementoLi = this.closest('.nav-item');
elementoLi.parentNode.removeChild(elementoLi);
});
});
});
// SELECCIONA ICONO
document.querySelectorAll('.icons i').forEach(function(icono) {
icono.addEventListener('click', function() {
cambiarIcono(this);
});
});
function cambiarIcono(iconoSeleccionado) {
var nuevaClase = iconoSeleccionado.className;
document.querySelectorAll('.nav-item .nav-link .item-icon i').forEach(function(itemIcon) {
itemIcon.className = nuevaClase;
});
document.getElementById('myModal').style.display = 'none';
}
body {
font-family: Arial, sans-serif;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: transparent;
color: #333;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
width: max-content;
}
.dropdown-content button {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border: 0;
width: 100%;
cursor: pointer;
text-align: left;
}
.dropdown-content button:hover {
background-color: #ddd;
}
.show {
display: block;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.7);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 300px;
}
.modal-content .icons {
text-align: center;
}
.modal-content .icons i{
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<div id="modulosFavoritos" class="tab-content">
<ul class="sidebar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
<span class="item-icon"><i class="fa-solid fa-screwdriver-wrench fa-lg"></i></span>
<span class="item-name">Link 1</span>
</a>
<div class="dropdown">
<button class="dropbtn"><i class="fa-solid fa-ellipsis-vertical fa-lg"></i></button>
<div class="dropdown-content">
<button class="openModalBtn">Cambiar icono</button>
<button class="eliminarBtn">Eliminar</button>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="item-icon"><i class="fa-solid fa-piggy-bank fa-lg"></i></span>
<span class="item-name">Link 2</span>
</a>
<div class="dropdown">
<button class="dropbtn"><i class="fa-solid fa-ellipsis-vertical fa-lg"></i></button>
<div class="dropdown-content">
<button class="openModalBtn">Cambiar icono</button>
<button class="eliminarBtn">Eliminar</button>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="item-icon"><i class="fa-solid fa-coins fa-lg"></i></span>
<span class="item-name">Link 3</span>
</a>
<div class="dropdown">
<button class="dropbtn"><i class="fa-solid fa-ellipsis-vertical fa-lg"></i></button>
<div class="dropdown-content">
<button class="openModalBtn">Cambiar icono</button>
<button class="eliminarBtn">Eliminar</button>
</div>
</div>
</li>
</ul>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span id="closeModalBtn" class="close"></span>
<div class="icons">
<i class="fa-solid fa-folder-open fa-lg"></i>
<i class="fa-solid fa-piggy-bank fa-lg"></i>
<i class="fa-solid fa-coins fa-lg"></i>
<i class="fa-solid fa-id-card fa-lg"></i>
<i class="fa-solid fa-newspaper fa-lg"></i>
<i class="fa-solid fa-screwdriver-wrench fa-lg"></i>
<i class="fa-solid fa-question fa-lg"></i>
</div>
</div>
</div>