点击时如何更改引导轮播上的图像？

Posted 2023-05-08

【中文标题】点击时如何更改引导轮播上的图像？

【英文标题】：How can you change an image on a bootstrap carousel on click?

【发布时间】：2021-08-01 21:08:16

【问题描述】：

我目前有一个引导轮播，其中包含 3 张图片，每张图片都有我想要的标题，因此当您单击第一个轮播图片上的标题时，图片将变为 gif，但无法使用基本的 javascript。

我想让plymouthImg变成permissionionImg，目前permissionionImg显示设置为none!important

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img id="plymouthImg" src="imgs/plymouth1.jpg" class="d-block w-100" >
          <img id="permitionImg" src="imgs/plymouthbaw.gif" class="d-block w-100" >
          <div class="carousel-caption d-md-block">
            <h3 onclick="changeText()" class="plymouth">Welcome to the University of Plymouth</h3>
            <h3 class="permition">Welcome to Permition</h3>
          </div>
        </div>

这是h3上的JavaScript函数

function changeText() 
    const plymouthText = document.querySelector('.plymouth');
    const permitionText = document.querySelector('.permition');
    const plymouthImg = document.getElementById('plymouthImg');
    const permitionImg = document.getElementById('permitionImg');

    plymouthText.style.display = "none";
    permitionText.style.display = "block";
    plymouthImg.style.display = "none!important";
    permitionImg.style.display = "block!important";

【参考方案1】：

我自己想出来了，所以我会把我的解决方案留在这里，以防其他人遇到这个问题。通过将图像包装在它们自己的单独 div 中并将显示更改应用到 div 而不是图像，它绕过了任何覆盖我编写的 JavaScript 的样式 html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div id="plymouthImg">
            <img src="imgs/plymouth1.jpg" class="d-block w-100" >
          </div>
          <div id="permitionImg">
            <img src="imgs/plymouthbaw.gif" class="d-block w-100" >
          </div>
          <div class="carousel-caption d-md-block">
            <h3 onclick="changeText()" class="plymouth">Welcome to the University of Plymouth</h3>
            <h3 class="permition">Welcome to Permition</h3>
          </div>

JavaScript

function changeText() 
    const plymouthText = document.querySelector('.plymouth');
    const permitionText = document.querySelector('.permition');
    const plymouthImg = document.getElementById('plymouthImg');
    const permitionImg = document.getElementById('permitionImg');

    plymouthText.style.display = "none";
    permitionText.style.display = "block";
    plymouthImg.style.display = "none";
    permitionImg.style.display = "block";