文章/答案/技术大牛

发布

问我想一次换两张图片
EN

Stack Overflow用户

提问于 2021-10-18 19:42:44

回答 3查看 80关注 0票数 1

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

javascript

回答 3

Stack Overflow用户

发布于 2021-10-18 19:59:27

您可以向每个按钮添加一个事件侦听器，该事件侦听器获取该按钮相对于其他按钮的索引，遍历每个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>

票数 0

Stack Overflow用户

发布于 2021-10-20 01:40:51

听起来你想要的是一种根据用户点击的按钮来显示或隐藏特定图像的方法。如果是这样的话，你绝对可以用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>

票数 0

Stack Overflow用户

发布于 2021-10-18 19:50:10

首先使用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>

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69621745

复制

相似问题

问我想一次换两张图片
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想一次换两张图片EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想一次换两张图片
EN