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

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

建议：

使用一些** class **（在示例中，添加了imageInput和image类）是一个好主意，以便更轻松地将所需元素分组并在DOM中定位它们（不是必需的，但是一个很好的做法是改善）。
选择的命名约定应为camelCaseNaames或下划线名称，而不是难以读取的所有简单的小写字母名称。

<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> '
        }
    });
};

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

2 个答案: