Question

我希望你能帮助我。

当我单击按钮时，它将在文件扩展名ex。之前添加前一晚（interior-1.jpg更改为Interior-1night），但仅影响第一张图像，即interior-1.jpg。我想要的是在“图片” ID下所有图片的文件扩展名前添加“夜晚”文本。

这是我的html代码

<button onclick="changeMode()">switch</button>
<img id="image" src="interior-1.jpg"/>
<img id="image" src="interior-2.jpg"/>
<img id="image" src="interior-3.jpg"/>
<img id="image" src="interior-4.jpg"/>
<img id="image" src="interior-5.jpg"/>

这是我的JavaScript代码

<script>
function changeMode() {
var filename = document.getElementById("image").src;
var modfilename = filename.replace(/(\.[\w\d_-]+)$/i, '-night$1');
document.getElementById("image").src = modfilename;
</script>
}

Answer 1

您不应从不在dom中的元素上使用相同的id名称。而是使用相同的class名称。要将src应用于所有img标记，请使用document.getElementsByClassName获取所有标记。遍历每个元素并使用forEach循环更改src

function changeMode() {
  var filename = document.getElementsByClassName("image");
  var a = '';
  Object.values(filename).forEach((e) => {
    a = e.src;
    var modfilename = a.replace(/(\.[\w\d_-]+)$/i, '-night$1');
    e.src = modfilename;
  })
}

<button onclick="changeMode()">switch</button>
<img class="image" src="interior-1.jpg" />
<img class="image" src="interior-2.jpg" />
<img class="image" src="interior-3.jpg" />
<img class="image" src="interior-4.jpg" />
<img class="image" src="interior-5.jpg" />

Answer 2

问题是您正在通过GetElementById获取元素，而该元素仅返回一个元素。您应该像这样将id标签更改为name：

<img name="image" src="interior-1.jpg"/>

然后，您应该可以使用var els = document.getElementsByName('image');

检索所有元素

现在您需要更改其文件名，所以

for (let i = 0; i<els.length; i++){
   els[i].src = els[i].src.replace(/(\.[\w\d_-]+)$/i, '-night$1');
}

Answer 3

这是我的两分钱。使用类。这样，您可以查询多个元素，而不仅仅是一个。然后使用forEach将更改应用于每个元素。

从document.querySelectorAll返回的元素是nodeList。这就是为什么我使用Array.prototype.forEach.call。

  

function changeMode() {
    const imageNodes = document.querySelectorAll(".image");
    Array.prototype.forEach.call(imageNodes,  (node) => {
    	let modfilename = node.src.replace(/(\.[\w\d_-]+)$/i, '-night$1');
      node.src = modfilename
    })
    
    }

<button onclick="changeMode()">switch</button>
<img class="image" src="interior-1.jpg"/>
<img class="image" src="interior-2.jpg"/>
<img class="image" src="interior-3.jpg"/>
<img class="image" src="interior-4.jpg"/>
<img class="image" src="interior-5.jpg"/>

通过在文件扩展名之前添加文本来切换图像

3 个答案: