Verificou a alteração da opacidade de outro elemento usando JS

Eu estou tentando fazer imagens ‘(na minha página da Web) opacidade mudar quando acordeões diferentes são expandidos (input: marcada).

Este é o site em questão: http://oasisexpressautowash.com/packages

Você verá que o “seu veículo está recebendo: menu de pacotes” à esquerda ilumina o pacote em que você está passando. Eu estou tentando fazer as luzes acenderem quando a guia do acordeão correspondente for expandida.

Este é o js (hoverfunctions.js) que estou mexendo para conseguir o efeito desejado.

jQuery(document).ready(function($) { jQuery("ul.container input#ac-1").click(function() { $('img.top').css({ opacity: 1.0 }); if (this.checked) { $('#mpactivator img.top').css({ opacity: 0 }); } else { $('img.top').css({ opacity: 1.0 }); } }); jQuery("ul.container input#ac-2").click(function() { $('img.top').css({ opacity: 1.0 }); if (this.checked) { $('#lavaactivator img.top').css({ opacity: 0 }); $('#rainxactivator img.top').css({ opacity: 0 }); $('#packageactivator img.top').css({ opacity: 0 }); $('#tireshineactivator img.top').css({ opacity: 0 }); $('#bpactivator img.top').css({ opacity: 0 }); } else { $('img.top').css({ opacity: 1.0 }); } }); jQuery("ul.container input#ac-3").click(function() { $('img.top').css({ opacity: 1.0 }); if (this.checked) { $('#hotwaxactivator img.top').css({ opacity: 0 }); $('#rainxactivator img.top').css({ opacity: 0 }); $('#packageactivator img.top').css({ opacity: 0 }); $('#tireshineactivator img.top').css({ opacity: 0 }); $('#bpactivator img.top').css({ opacity: 0 }); } else { $('img.top').css({ opacity: 1.0 }); } }); jQuery("ul.container input#ac-4").click(function() { $('img.top').css({ opacity: 1.0 }); if (this.checked) { $('#rainxactivator img.top').css({ opacity: 0 }); $('#packageactivator img.top').css({ opacity: 0 }); $('#tireshineactivator img.top').css({ opacity: 0 }); } else { $('img.top').css({ opacity: 1.0 }); } }); jQuery("ul.container input#ac-5").click(function() { $('img.top').css({ opacity: 1.0 }); }); }); 

Agora eu estou tentando manter a funcionalidade css de pacotes que você está recebendo menu após JS ser executado, assim como obter a opacidade para retornar ao seu valor anterior quando outra input é verificada.

Agora, quando você passa o mouse sobre os botões depois de expandir um acordeão, eles não acendem. E depois que você expande outro acordeão, as luzes do acordeão expandido anterior permanecem acesas.

Por favor ajude!

jQuery().checked() não é um manipulador de events válido. Você deve usar o jQuery.click() ou jQuery.change() .

Dentro do evento de mudança, você deve verificar se o elemento está marcado e, então, tomar as medidas apropriadas.

 jQuery(".chbd-ac-container input:nth-child(1)").click(function() { if (this.checked) { $('img.top').css({ opacity: 0 }); } else { $('img.top').css({ opacity: 1.0 }); } });