从数组列表中替换 IMG src 并以 HTML 显示更改

Question

我正在尝试用数组输入字段中的值(新img.src)替换旧的img.src。

我遇到的问题是：数组中的值被替换为新值，但 HTML 内容中的 img.src 不会改变，因此 img 保持不变。

function changegallery() {
var newimgURL = Array.from(document.querySelectorAll('#menuitems > input')).map(imgdata => imgdata.value);
console.log('newimgURL', newimgURL);
var oldimgURL = Array.from(document.querySelectorAll('#gallery > a > img')).map(imgdata => imgdata.src);
var changeimgURL = oldimgURL.splice(0, oldimgURL.length, ...newimgURL);
console.log('IMG', oldimgURL);
};

<form id="menuitems">
<input type="url" id="changeimg1" placeholder="URL 1" />
<input type="url" id="changeimg2" placeholder="URL 2" />
<input type="url" id="changeimg3" placeholder="URL 3" />
<input type="url" id="changeimg4" placeholder="URL 4" />
<Button onClick={changegallery()}>button</Button>
</form>
<div id="gallery">
<a> <img id="img1" src="https://via.placeholder.com/150"> </a>
<a> <img id="img2" src="https://via.placeholder.com/150"> </a>
<a> <img id="img3" src="https://via.placeholder.com/150"> </a>
<a> <img id="img4" src="https://via.placeholder.com/150"> </a>
</div>

小提琴：https://jsfiddle.net/cn1L4y7j/

Answer 1

当您创建包含原始图像 src 属性的第二个数组，然后修改该数组以包含新值时 - 这些值不会保留为对原始 DOM 属性的引用，它只是一个字符串数组，因此修改它不会影响页面。 相反，您需要将这些新值显式插入到 DOM 中。

function changegallery() {
// read the new URLs
var newimgURL = Array.from(document.querySelectorAll('#menuitems > input')).map(imgdata => imgdata.value); // note imgdata.value, not the whole image
// Insert them into the DOM
Array.from(document.querySelectorAll('#gallery img')).map((img, i) => {
if (newimgURL[i]) { // don't replace with empty strings
img.setAttribute("src", newimgURL[i])
}
})
};

<div id="menuitems">
<!-- I've included some sample values for demo -->
<input type="url" id="changeimg1" placeholder="URL 1" value="http://placehold.it/100x100"/>
<input type="url" id="changeimg2" placeholder="URL 2" value="http://placehold.it/101x101"/>
<input type="url" id="changeimg3" placeholder="URL 3" />
<input type="url" id="changeimg4" placeholder="URL 4" />
<Button onClick="changegallery()">button</Button>
</div>
<div id="gallery">
<a> <img id="img1" src="https://via.placeholder.com/150"> </a>
<a> <img id="img2" src="https://via.placeholder.com/150"> </a>
<a> <img id="img3" src="https://via.placeholder.com/150"> </a>
<a> <img id="img4" src="https://via.placeholder.com/150"> </a>
</div>

Answer 2

下面的代码反映了我们在您帖子评论中的讨论：

建议：

• 使用一些 ** 类**(在示例中，添加了 imageInput 和 image 类)来更轻松地对所需元素进行分组并在 DOM 中面向它们(不是必需的，但是一种很好的做法和改进)是个好主意。
• 选择的命名约定应该是 camelCaseNaames 或 underscore_names，而不是难以阅读的简单小写名称。

<form id="menuItems">
<input class="imageInput" type="url" id="changeimg1" placeholder="URL 1" />
<input class="imageInput" type="url" id="changeimg2" placeholder="URL 2" />
<input class="imageInput" type="url" id="changeimg3" placeholder="URL 3" />
<input class="imageInput" type="url" id="changeimg4" placeholder="URL 4" />
<button onClick="changegallery()">button</button>
</form>
<div id="gallery">
<a> <img id="img1" class="image" src="https://via.placeholder.com/150"> </a>
<a> <img id="img2" class="image" src="https://via.placeholder.com/150"> </a>
<a> <img id="img3" class="image" src="https://via.placeholder.com/150"> </a>
<a> <img id="img4" class="image" src="https://via.placeholder.com/150"> </a>
</div>

该函数可以像这样重写：

function changegallery() {
var newImgURLs = Array.from(document.getElementsByClassName('imageInput')).map(input => input.value);
var images = Array.from(document.getElementsByClassName('image'));
images.map(function(img, i){
img.src = newImgURLs[i] || null;
});
};

这些 ID 在当前实现中没有任何用途。如果你想让 [changeimg1] 专门改变 [img1] 的 src 值，那么是的，它们很好。如果您希望图库仅基于此输入"创建一组新图像"，同时丢弃任何未填充的输入，则它们是无用的。

如果输入不影响单个图像(如果只添加了 3 张图像，则库中仅显示 3 张图像，如评论中所述)，您应该在上传一组新图像时重新创建图库：

function changegallery() {
var gallery = document.getElementsById('gallery');
gallery.innerHTML = '';
Array.from(document.getElementsByClassName('imageInput')).map(function(input, i) {
if (input.value != '') {
gallery.innerHTML += '<a> <img id="img'+i+'" class="image" src="'+input.value+'"> </a> '
}
});
};