[英]I want to change 2 images at once
I have images in imageBox1 and imageBox2 and when I click button, is there any way that I can change images in both boxes at the same time?我在 imageBox1 和 imageBox2 中有图像,当我单击按钮时,有什么方法可以同时更改两个框中的图像? with JS?
用JS? For instance, I when I click "hello", I want to make image1-1 and image2-1 display together, and when I click "world", they image1-2 and image2-2 should display together.
比如我点击“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>
It sounds like what you're asking for is a way to show or hide specific images depending on which button the user clicks.听起来您要求的是一种根据用户单击的按钮来显示或隐藏特定图像的方法。 If so, you can definitely do this with JavaScript.
如果是这样,你绝对可以用 JavaScript 做到这一点。
Here's a beginner-friendly example using your HTML.这是一个使用 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>
first hide them with css then show them when clicking by js首先用 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>
You can add an event listener to each button that gets the index of the button relative to the other buttons, loops through each child in each div
and shows the img
whose index is the same as the button's.您可以向每个按钮添加一个事件侦听器,以获取按钮相对于其他按钮的索引,循环遍历每个
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.