我想一次更改 2 個圖像

Question

我在 imageBox1 和 imageBox2 中有圖像，當我單擊按鈕時，有什么方法可以同時更改兩個框中的圖像？ 用JS？ 比如我點擊“hello”時，我想讓image1-1和image2-1一起顯示，而當我點擊“world”時，image1-2和image2-2應該一起顯示。

    <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>

Answer 1

聽起來您要求的是一種根據用戶單擊的按鈕來顯示或隱藏特定圖像的方法。 如果是這樣，你絕對可以用 JavaScript 做到這一點。

這是一個使用 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>

Answer 2

首先用 css 隱藏它們，然后在通過 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>

Answer 3

您可以向每個按鈕添加一個事件偵聽器，以獲取按鈕相對於其他按鈕的索引，循環遍歷每個div每個子項並顯示其索引與按鈕相同的img 。

 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>