Hola, estoy tratando de hacer un semáforo usando una serie de imágenes. Actualmente necesito cambiar la ruta de la imagen indicada en css cuando se hace clic en un botón para que cambie la imagen de la luz. Entonces, en este caso, la línea content.url() de cada clase debe cambiarse cuando el botón llama a la función. El método que estoy usando actualmente es incorrecto, pero creo que puede ayudar a comprenderlo.
<style> #rect{ height:550px; width:180px; border:1px solid #000; } .black1 { position: relative; top: 10px; left: 10px; content.url('black.png') } .black2 { position: relative; top: 20px; left: 10px; content.url('black.png') } .black3 { position: relative; top: 30px; left: 10px; content.url('black.png') } </style> <Body> <div id="rect"> <img class="black1" /> <img class="black2" /> <img class="black3" /> </div> <script> var x = ["black.png", "red.png", "orange.png",'green.png']; var i = -1; function change(){ i++; if (i == 0){ document.getElementByClass('black1').src=x[1]; document.getElementByClass('black2').src=x[0]; document.getElementByClass('black3').src=x[0]; } } </script> <button onclick = "change()">Change light</button> </div> </Body> </html>Separaría sus clases de css en rojo, naranja/amarillo, verde. Entonces puede trabajar con la función classList. A continuación encontrará un ejemplo sencillo de trabajo. Siéntete libre de mejorarlo.
let i = -1; function change() { const tl = document.querySelectorAll('.light'); i++; if (i == 0) { tl[0].classList.add('red') } if (i == 1) { tl[1].classList.add('yellow') } if (i == 2) { tl[2].classList.add('green') } if (i == 3) { tl[2].classList.remove('green'); tl[1].classList.remove('yellow'); tl[0].classList.remove('red'); i = -1; } } #rect{ height:350px; width:120px; border:1px solid #000; } img { height: 100px; } .light { position: relative; top: 10px; left: 10px; content: url(https://via.placeholder.com/150/000000); } .red { content: url(https://via.placeholder.com/150/FF0000); } .yellow { content: url(https://via.placeholder.com/150/FFFF00); } .green { content: url(https://via.placeholder.com/150/008000); } <Body> <div id="rect"> <img class="light" /> <img class="light" /> <img class="light" /> </div> <script> </script> <button onclick = "change()">Change light</button> </div> </Body> </html>Para hacer que su programa funcione, haría que se viera así:
content.url('black.png') en cssimg que serían "black.png" const urls = ["black.png", "red.png", "orange.png",'green.png']; let index = -1; const imgs = ["black1", "black1", "black1"].map(className => document.getElementByClass(className)); function change(){ index++; // will take rest of division, // for example 4 % 3 === 1, 5 % 3 === 2, 6 % 3 === 0 const currentLight = index % 3; imgs.forEach((image, i) => { if (i === currentLight) { // current image should be active and we map it correct light urls // for example currentLight is 0, if will make it url[0] which is red image.src = urls[currentLight + 1]; } else { // turn off the lights that are not equal to currentLight image.src = urls[0]; } }); } change(); // initial call to turn the red light on. If not called all lights will be offEspero que este sea el comportamiento que estabas buscando.
Pero escribí que necesitas deshacerte del content: url y tu pregunta es sobre cómo cambiarlo. Básicamente, JavaScript no puede modificar las clases (a menos que las genere dinámicamente con JS desde una cadena, pero esta es una idea terrible). Si realmente desea usar content: url (no significa que deba hacerlo), debe crear 3 clases .red , .orange y .green con las respectivas URL y alternar esas clases con JS como lo haría al alternar src's.