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>

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

1 个答案: