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值...

＆＃13;

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();

＆＃13;

<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="" />

＆＃13;

如果路径格式发生变化，这将为您提供所需的以及灵活性，因为您需要的所有内容都在html中定义，并且脚本永远不需要更改。

例如，如果您决定将图像移动到另一个子文件夹中，您只需更改图像标记，它仍然有效...

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

Answer 2

我相信你可以通过创建脚本来做到这一点。如果您为每个<img>标记分配ID，则可以执行以下操作：

document.getElementById('exampleID').innerHTML="<src="new_path">";

最终将每个<img>标记放入DIV

<div id=someid>
<img src="dist/one/rocket.png" alt="" />
</div>

脚本：

document.getElementById('someid').innerHTML="<img src="new_path"/>";

我没有测试它，但答案应该非常接近这个。

我希望这有用。

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

2 个答案: