如何在点击时更改 bootstrap 旋转木马上的图片？

Question

我目前有一个 bootstrap 轮播图，其中有 3 张图片，每张图片都有一个我想要的标题，所以当您点击第一个轮播图片上的标题时，图片将变为 gif，但事实并非如此使用基本 JavaScript.

工作

我想把plymouthImg改成permitionImg，目前permitionImg显示设置为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" alt="Roland Levinsky Building">
          <img id="permitionImg" src="imgs/plymouthbaw.gif" class="d-block w-100" alt="Permition">
          <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";

}

Answer 1

我自己想出来了，所以我会把我的解决方案留在这里，以防其他人遇到这个问题。通过将图像包装在自己的 dividual div 中并将显示更改应用于 divs 而不是图像，它绕过了任何覆盖 JavaScript I 的样式写了 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" alt="Roland Levinsky Building">
          </div>
          <div id="permitionImg">
            <img src="imgs/plymouthbaw.gif" class="d-block w-100" alt="Permition">
          </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";
}

如何在点击时更改 bootstrap 旋转木马上的图片？

How can you change an image on a bootstrap carousel on click?

html

javascript

css

bootstrap-carousel

bootstrap-4