如何单击图像网格中的项目和 return 不同容器中的所选图像 - Javascript

Question

large_image 应显示为用户单击的任何 grid_images。我搜索了 S.O.F。和 google，但尚未找到解决此问题的方法。

<div id="large_image" class="container">
    <img src="">
</div>
<div id="grid_images" class="container">
    <img src="assets/images/rock.png">
    <img src="assets/images/paper.png">
    <img src="assets/images/scissors.png">
</div>

Javascript:

function change_image {
    document.getElementById("large_image").img = 
    // How do I select the image that is clicked?
}

Answer 1

如果使用jQuery，请将以下代码放在$(document).ready(function(){ ... }) 内，否则将其添加到页面底部。

  var largeImage = document.getElementById("large_image");
  var gridImage = document.getElementById("grid_images");

  gridImage.addEventListener('click', function(event) { 
      largeImage.removeChild(largeImage.firstChild);
      largeImage.appendChild(event.target.cloneNode());
  });

Answer 2

好的，有几件事。首先，为了更新 large_image 下 img 的 src，您需要一种引用该 img 元素的方法。最简单的方法是给 img 元素一个 ID。由于您没有在其父级 div 上使用 ID，我将把它移至 img。如果您确实需要 div 上的 ID，则只需确保 img 上的 ID 是唯一的。

现在，当您调用 change_image 时，您需要传入被点击的 img 的来源，因此您可以将其设置为 large_image 的来源。您的 JavaScript 函数应该如下所示：

function change_image(imgSrc) {
    document.getElementById("large_image").src = imgSrc;
}

HTML 应该是这样的：

<div class="container">
    <img id="large_image" src="">
</div>
<div id="grid_images" class="container">
    <img src="assets/images/rock.png" onclick="change_image(this.src);">
    <img src="assets/images/paper.png" onclick="change_image(this.src);">
    <img src="assets/images/scissors.png" onclick="change_image(this.src);">
</div>

下面的代码片段展示了它的实际效果，当然，图像使用了不同的来源。

    function change_image(imgSrc) {
      document.getElementById("large_image").src = imgSrc;
    }

<div class="container">
  <img id="large_image" src="">
</div>
<div id="grid_images" class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Aerial_Crater_Lake.jpg/320px-Aerial_Crater_Lake.jpg" onclick="change_image(this.src);">
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/Boating_in_Spirit_Lake-pre_1980.jpg" onclick="change_image(this.src);">
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/1e/Okanagan_Lake.jpg/320px-Okanagan_Lake.jpg" onclick="change_image(this.src);">
</div>

如何单击图像网格中的项目和 return 不同容器中的所选图像 - Javascript

How to click an item in a grid of images and return the selected image in a different container - Javascript

javascript

image

onclick