js修改一处，html多张图片更换目录
http://www.baidu.com/img/01/tu1.png
http://www.baidu.com/img/01/tu2.png
http://www.baidu.com/img/01/tu3.png
能否实现比如上面的图片链接，01目录，js修改一处那么这三张图片的目录自动更换，比如我01要该成：02 那这三张图片的链接就会变成：
http://www.baidu.com/img/02/tu1.png
http://www.baidu.com/img/02/tu2.png
http://www.baidu.com/img/02/tu3.png
document.querySelectorAll获取下img对象，然后for遍历replace下src的值就行，示例代码如下
<img src="http://www.baidu.com/img/01/tu1.png" width="150">
<img src="http://www.baidu.com/img/01/tu2.png" width="150">
<img src="http://www.baidu.com/img/01/tu3.png" width="150">
<img src="http://www.baidu.com/img/01/tu4.png" width="150">
<img src="http://www.baidu.com/img/01/tu5.png" width="150">
<img src="http://www.baidu.com/img/01/tu6.png" width="150">
<br />
<button onclick="changeSrc()">批量替换图片src</button>
<script>
function changeSrc() {
var imgs = document.querySelectorAll('img[src*="/01/"]');
for (var i = 0; i < imgs.length; i++)imgs[i].src = imgs[i].src.replace('/01/', '/02/');
}
</script>
有其他问题可以继续交流~
一楼方案很好，可采纳哦
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片替换</title>
</head>
<body>
<div>
<img src="http://www.baidu.com/img/01/tu1.png" alt="">
<img src="http://www.baidu.com/img/01/tu2.png" alt="">
<img src="http://www.baidu.com/img/01/tu3.png" alt="">
<button onclick="changeSrc()">改变路径</button>
</div>
</body>
<script>
function changeSrc() {
let imgList = document.querySelectorAll('img')
imgList.forEach(item => {
item.src = item.src.replace("01", "02")
})
}
</script>
</html>
点击按钮前：
点击按钮后：
代码
<body>
<div>
<img src="http://www.baidu.com/img/01/tu1.png" class="a" width="180px"/>
<img src="http://www.baidu.com/img/01/tu1.png"
class="a" width="100px"/>
<img src="http://www.baidu.com/img/01/tu1.png"
class="a" width="100px"/>
<button onclick="gh()">更换图片</button>
</div>
</body>
<script>
function gh(){
var s= document.getElementsByClassName("a");
for(var i=0;i<s.length;i++){
console.log("更换前下标"+i+"张图片="+s[i].src);
s[i].src="http://www.baidu.com/img/02/tu2.png";
console.log("更换后下标"+i+"张图片="+s[i].src);
}
}
</script>
效果
如有帮助，请采纳！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片替换</title>
</head>
<body>
<div>
<img src="http://www.baidu.com/img/01/xxxx1.png" width="150">
<img src="http://www.baidu.com/img/01/xxxx2.png" width="150">
<img src="http://www.baidu.com/img/01/xxxx3.png" width="150">
<img src="http://www.baidu.com/img/01/xxxx4.png" width="150">
<img src="http://www.baidu.com/img/01/xxxx5.png" width="150">
<img src="http://www.baidu.com/img/01/xxxx6.png" width="150">
<button onclick="changeSrc()">改变路径</button>
</div>
</body>
<script>
function changeSrc() {
let imgList = document.querySelectorAll('img')
imgList.forEach(item => {
item.src = item.src.replace("01", "02")
})
}
</script>
</html>
一楼回答的很好，题主也不采纳，这样太伤人了
很多回答都不错，题主可根据个人需要做适时性地改装，实现。
<script type="text/javascript">
function a(){
document.getElementById("img1").src="http://www.baidu.com/img/02/tu1.png";
document.getElementById("img2").src="http://www.baidu.com/img/02/tu2.png";
document.getElementById("img3").src="http://www.baidu.com/img/02/tu3.png";
}
</script>
<button onclick="a()">换图片</button>
<br>
<img src="http://www.baidu.com/img/01/tu1.png" width="150" id="img1">
<img src="http://www.baidu.com/img/01/tu2.png" width="150" id="img2">
<img src="http://www.baidu.com/img/01/tu3.png" width="150" id="img3">
输入目录名就可以对应更改：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Document</title>
<style>
html, body {
padding: 0;
margin: 0;
}
img {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div style="margin: 20px;">
<label for="dic">目录:</label>
<input id="dic" type="text" onchange="changeDic(event)"/>
</div>
<img id="tu1" src="" alt="">
<img id="tu2" src="" alt="">
<img id="tu3" src="" alt="">
</body>
<script>
let dic = '01'
change = () => {
[].slice.apply(document.querySelectorAll("img")).map(cur => {
cur.src = `http://www.baidu.com/img/${dic}/${cur.id}.png`
})
}
window.onload = change
changeDic = (e) => {
dic = e.target.value
change()
}
</script>
</html>
将路径的前半段放在js里面，再定义一个参数，就是01那些，然后再src中把路径全部拼上
首先取到要进行修改的图片对象，对其进行遍历。然后使用replace方法进行更改。
用js获取html的img对象，再用for循环遍历修改就可以了。可以参考以下代码
<script>
function changeImgSrc() {
var imgs = document.querySelectorAll('img[src*="/01/"]');
for (var i = 0; i < imgs.length; i++)imgs[i].src = imgs[i].src.replace('/01/', '/02/');
}
</script>
可以设置事件修改img标签的src属性，可以达到切换图片的效果
1.定义一个基础目录变量
2.将要展示的图片名称放到一个数组中
3.使用for循环进行元素操作
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="imgs"></div>
<script>
//要更换目录时，直接更换basedir地址，后续路径会自动改变。
var basedir = "http://www.baidu.com/img/01/";
var imgs = ['tu1.png', 'tu2.png', 'tu3.png', ];
for (var i = 0; i < imgs.length; i++) {
var img = new Image();
img.src = basedir + imgs[i];
document.getElementById("imgs").appendChild(img);
}
</script>
</body>
</html>
实现效果：
1.修改前
2.修改后
动态更新图片路径：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="imgs"></div>
<button onclick="changeimg()">修改图片路径</button>
<script>
//要更换目录时，直接更换basedir地址，后续路径会自动改变。
var basedir = "http://www.baidu.com/img/01/";
var imgs = ['tu1.png', 'tu2.png', 'tu3.png', ];
for (var i = 0; i < imgs.length; i++) {
var img = new Image();
img.src = basedir + imgs[i];
document.getElementById("imgs").appendChild(img);
}
function changeimg(){
var res = prompt("请输入图片目录",basedir);
if(res){
//清除以前的图片元素，也可以采用加属性的方式进行修改
document.getElementById("imgs").innerHTML = "";
for (var i = 0; i < imgs.length; i++) {
var img = new Image();
img.src = res + imgs[i];
document.getElementById("imgs").appendChild(img);
}
}
}
</script>
</body>
</html>
效果预览：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
</head>
<body>
<img class="image" src="http://www.baidu.com/img/01/tu1.png" />
<img class="image" src="http://www.baidu.com/img/01/tu2.png" />
<img class="image" src="http://www.baidu.com/img/01/tu3.png" />
<button onclick="show1()"></button>
</body>
<script type="text/javascript">
function show1(){
var list = document.getElementsByClassName('image');
for(var i=0;i<list.length;i++){
document.getElementsByClassName('image')[i].src=document.getElementsByClassName('image')[i].src.replace("01","02")
}
}
function show2(){
}
</script>
</html>
1第一步 定义一个i数值
2第二步 for循环进行累加
3用双引号运算符动态改变数值
我是歌谣 前端导师 欢迎交流
把01那里设置成一个变量，拼接成url，修改的时候修改变量就好了
(๑•̀ㅂ•́)و✧ 果然还是打赏丰富的比较让人有想回答的激情