1

SITUACION: cuando clickeo uno, se alteran los dos..

Al principio estan asi despues de clickear se altera la opacidad de ambos

Lo que busco es que al clickear uno se altere solo su opacidad al 100% y viceversa. y que al clickear de nuevo también disminuya dicha opacidad al 50%

HTML:

        <div class="opcionContacto">
            <img onclick="opacidad()" id="mailWay" class="contactWay" src="/recursos/correos-electronicos.png" alt="">
            <img onclick="opacidad()" id="phoneWay" class="contactWay" src="/recursos/smartphone.png" alt="">
        </div>

CSS:

    /*$ antes de clickear */
.contactWay{
    width: 7%;
    opacity: 50%;
    margin:  3px;
}

/*$ despeues de clickear */
.contactWayClick{opacity: 100%;}

JavaScript:

const clicki = document.querySelectorAll(".contactWay");

const mailId = clicki[0].getAttribute('id');
const phoneId = clicki[1].getAttribute('id');

function opacidad() {
    if (mailId === "mailWay") {clicki[0].classList.toggle("contactWayClick");}
    if (phoneId === "phoneWay") {clicki[1].classList.toggle("contactWayClick");}
}

1 respuesta 1

0

No necesitas involucrar IDs, basta obtener todos los elementos y recorrerlos para asignar evento. Dentro de la función del evento analizas cuál recibió clic para cambiar opacidad y restablecer el otro para que solo uno aparezca con opacidad 100%.

// Obtener todos los elementos
let contactWays = document.querySelectorAll('.contactWay');

// Recorrer para asignar evento
contactWays.forEach(cw => cw.addEventListener('click', opacity));

// Recibir evento para identificar elemento
function opacity(e) {
    // Recorrer elementos
    contactWays.forEach(cw => {
        // Si es el que recibió clic
        if(cw == e.currentTarget) {
            // Intercambiar clase
            cw.classList.toggle('contactWayClick');
        } else {
            // Quitar clase, solo se va a mostrar uno con opacidad
            cw.classList.remove('contactWayClick');
        }
    });
}
/*$ antes de clickear */
.contactWay{
    width: 7%;
    opacity: 50%;
    margin:  3px;
}

/*$ despeues de clickear */
.contactWayClick{opacity: 100%;}

/* Solo para probar */
.contactWay {
    display: inline-block;
    height: 30px;
}
#mailWay {
    background: #a00;
}
#phoneWay {
    background: #00a;
}
<div class="opcionContacto">
    <img id="mailWay" class="contactWay" src="/recursos/correos-electronicos.png" alt="">
    <img id="phoneWay" class="contactWay" src="/recursos/smartphone.png" alt="">
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.