gpt4 book ai didi

javascript - 使用 jquery 仅更改图像源中的目录

转载 作者:行者123 更新时间:2023-12-02 16:13:37 26 4
gpt4 key购买 nike

我有一个选择菜单,其中有四种颜色选项,每个选项有三个图像。当用户在选择菜单中选择不同的选项时,我想更改所有三个图像的图像目录。

<img src="images/black/img1.jpg" />
<img src="images/black/img2.jpg" />
<img src="images/black/img3.jpg" />

<select>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="indigo">Indigo</option>
<option value="teal">Teal</option>
</select>

我假设有一种方法可以在 Jquery 中使用通配符,但显然我还不够熟练,无法弄清楚。

最佳答案

试试这个 - 注意我给 imgs 一个类并选择一个 ID

$(function() { // when page has loaded
$("#color").on("change",function() { // assign the event handler
var col=$(this).val(); // value of select
$(".img").each(function() { // I gave the imgs a class to do this
var srcParts = this.src.split("/"); // split the src on /
this.src="images/"+col+"/"+srcParts.pop(); // take the image name
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="img" src="images/black/img1.jpg" />
<img class="img" src="images/black/img2.jpg" />
<img class="img" src="images/black/img3.jpg" />

<select id="color">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="indigo">Indigo</option>
<option value="teal">Teal</option>
</select>

关于javascript - 使用 jquery 仅更改图像源中的目录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29906111/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com