Tengo imágenes en imageBox1 e imageBox2 y cuando hago clic en el botón, ¿hay alguna forma de cambiar las imágenes en ambos cuadros al mismo tiempo? con JS? Por ejemplo, cuando hago clic en "hola", quiero que la imagen 1-1 y la imagen 2-1 se muestren juntas, y cuando hago clic en "mundo", la imagen 1-2 y la imagen 2-2 deben mostrarse juntas.
<div class = "Button"> <button type="button">hello</button> <button type="button">world</button> </div> <div class = "imageBox1"> <img src="image1-1.jpg"> <img src="image1-2.jpg"> </div> <div class = "imageBox2> <img src="image2-1.jpg"> <img src="image2-2.jpg"> </div>Puede agregar un detector de eventos a cada botón que obtiene el índice del botón en relación con los otros botones, recorre cada elemento secundario en cada div y muestra el img cuyo índice es el mismo que el del botón.
const divs = document.querySelectorAll('.image'); const buttons = document.querySelectorAll('button') buttons.forEach((e, i) => e.addEventListener('click', function() { divs.forEach((f) => [...f.children].forEach((g, i1) => g.style.display = i == i1 ? "block" : "none")) })) img { display: none; } <div class="Button"> <button type="button">hello</button> <button type="button">world</button> </div> <div class="imageBox1 image"> <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"> <!-- image1-1.jpg --> <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=96"> <!-- image1-2.jpg --> </div> <div class="imageBox2 image"> <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=96"> <!-- image2-1.jpg --> <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"> <!-- image2-2.jpg --> </div>Parece que lo que está solicitando es una forma de mostrar u ocultar imágenes específicas según el botón en el que haga clic el usuario. Si es así, definitivamente puedes hacer esto con JavaScript.
Aquí hay un ejemplo para principiantes usando su HTML.
// set up some variables to make the code easier to read const helloBtn = document.getElementById("hello-button") const worldBtn = document.getElementById("world-button") const img1 = document.getElementById("image1") const img2 = document.getElementById("image2") const img3 = document.getElementById("image3") const img4 = document.getElementById("image4") // When the user clicks the "hello" button, run a function named handleHelloClick helloBtn.addEventListener("click", handleHelloClick); // When the user clicks the "world" button, run a function named handleWorldClick worldBtn.addEventListener("click", handleWorldClick); // this function handles the "hello" click function handleHelloClick() { img1.style.display = "none"; img2.style.display = "block"; img3.style.display = "block"; img4.style.display = "none"; } // this function handles the "world" click function handleWorldClick() { img1.style.display = "block"; img2.style.display = "none"; img3.style.display = "none"; img4.style.display = "block"; } <div class="buttons"> <button id="hello-button" type="button">hello</button> <button id="world-button" type="button">world</button> </div> <div class="imageBox1"> <img id="image1" src="https://randomuser.me/api/portraits/women/75.jpg"> <img id="image2" src="https://randomuser.me/api/portraits/men/76.jpg"> </div> <div class="imageBox2"> <img id="image3" src="https://randomuser.me/api/portraits/women/78.jpg"> <img id="image4" src="https://randomuser.me/api/portraits/men/80.jpg"> </div>primero ocúltelos con css y luego muéstrelos al hacer clic con js
const hello = document.getElementById("hello") const world = document.getElementById("world") hello.onclick= () => { document.querySelectorAll(".first").forEach(el=> el.style.display = "block") } world.onclick= () => { document.querySelectorAll(".second").forEach(el=> el.style.display = "block") } .first, .second { display : none } <div class = "Button"> <button id="hello" type="button">hello</button> <button id="world" type="button">world</button> </div> <div class = "imageBox1"> <img class="first" src="https://dummyimage.com/200x100/000/fff&text=first"> <img class="second" src="https://dummyimage.com/200x100/000/fff&text=second"> </div> <div class = "imageBox2"> <img class="first" src="https://dummyimage.com/200x100/000/fff&text=first"> <img class="second" src="https://dummyimage.com/200x100/000/fff&text=second"> </div>