Javascript - 更改文件夹路径，而不是文件

Question

我想弄清楚如何替换文件夹路径而不是img。文件夹名称始终相同，它们不是动态的。如果我单击“one”按钮，它应该将所有图像文件夹路径更改为“dist/one/”，其他两个的逻辑相同。

<button id="one" type="button">This should change the path to "dist/one/"</button>
<button id="two" type="button">This should change the path to "dist/two/"</button>
<button id="three" type="button">This should change the path to "dist/three/"</button>

<img src="dist/one/rocket.png" alt="" />
<img src="dist/two/rocket.png" alt="" />
<img src="dist/three/rocket.png" alt="" />

Answer 1

我会为此使用数据属性。存储图像 src 的模板和每个按钮的路径值，然后为每个按钮单击相应地更新图像 src 值...

var buttons = document.querySelectorAll("button");
var images = document.querySelectorAll("img");

[].forEach.call(buttons, function(button) {

  button.addEventListener("click", function() {

    var path = this.getAttribute("data-path");

    [].forEach.call(images, function(img) {

      var src = img.getAttribute("data-src-template").replace("{path}", path);
      img.src = src;
      console.log(img.src);

    });
  });
});

// intialize the image...
document.querySelector("#one").click();

<button id="one" type="button" data-path="dist/one">This should change the path to "dist/one/"</button><br/>
<button id="two" type="button" data-path="dist/two">This should change the path to "dist/two/"</button><br/>
<button id="three" type="button" data-path="dist/three">This should change the path to "dist/three/"</button><br/>

<img data-src-template="{path}/rocket.png" alt="" />
<img data-src-template="{path}/rocket.png" alt="" />
<img data-src-template="{path}/rocket.png" alt="" />

这可以满足您的需要，并且在路径格式发生变化时也能保持灵 active ，因为您需要的所有内容都在 html 中定义，并且脚本永远不需要更改。

例如，如果您决定将图像移动到另一个子文件夹中，您只需更改图像标签，它仍然可以工作...

<img data-src-template="newSubFolder/{path}/rocket.png" alt="" />