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

Question

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

<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 中使用通配符，但显然我还不够熟练，无法弄清楚。

Answer 1

试试这个 - 注意我给 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>