onClick 更改 src 图像

Question

我正在尝试使用 JavaScript 执行此操作 shema，当我单击“切换”按钮时，它会更改汽车 (.png) 以及与汽车相关的文本内容侧边栏（汽车规格），我有四辆车。（我是一名前端初级开发人员，还在想办法解决这个问题），

如果你能给我一些线索，会有很大帮助！

谢谢

我的代码 HTML 按钮看起来像这样：

<div class="btn" onclick="changeCar()"> <img id="img-id" src="/src/asset/img/pixel-yellow-car.png" alt=""> <span>SWITCH</span> </div>

英雄部分：

<div class="hero_car">
                        <div class=""><img id="hero-car-src" src="/src/asset/img/pixel-purple-car.png" alt=""></div>
                    </div>

汽车规格代码：

<aside class="car-specs" id="img">
                    <div id="purple-car-specs">
                        <div class="div">
                            <span>
                                POWER
                                <br>
                                425
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                WEIGHT
                                <br>
                                4,140
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                GRIP
                                <br>
                                135
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                SHIFT SPEED
                                <br>
                                0.350s
                            </span>
                        </div>
                    </div>
                    <div id="blue-car-specs">
                        <div class="div">
                            <span>
                                POWER
                                <br>
                                425
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                WEIGHT
                                <br>
                                4,140
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                GRIP
                                <br>
                                135
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                SHIFT SPEED
                                <br>
                                0.350s
                            </span>
                        </div>
                    </div>
                    <div id="green-car-specs">
                        <div class="div">
                            <span>
                                POWER
                                <br>
                                425
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                WEIGHT
                                <br>
                                4,140
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                GRIP
                                <br>
                                135
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                SHIFT SPEED
                                <br>
                                0.350s
                            </span>
                        </div>
                    </div>
                    <div id="yellow-car-specs">
                        <div class="div">
                            <span>
                                POWER
                                <br>
                                425
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                WEIGHT
                                <br>
                                4,140
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                GRIP
                                <br>
                                135
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                SHIFT SPEED
                                <br>
                                0.350s
                            </span>
                        </div>
                    </div>
                </aside>

编辑：感谢 Devielu，onclick 功能只需稍作调整即可正常工作，我现在正在考虑如何将这些汽车规格连接到正确的 imgs。

Answer 1

您需要在图像元素上定义一个 ID。像这样：

<img id="img-id" src="" onclick="changeCar()" />

然后您可以使用图像路径和索引创建一个数组，以了解选择了哪个图像。

var index = 0;
const images = ["img1.png", "img2.png", "img3.png"];

之后，您将创建函数 changeCar 来更新图像并增加索引。如果索引等于 images.length，则将索引重置为 0：

function changeCar() {
  document.getElementById("img-id").src = images[index];
  index += 1;              
  if (index == images.length) {
    index = 0;
  }
}

尝试应用类似的内容并提供反馈。

onClick 更改 src 图像

onClick change src images

javascript

onclick

src