Question

我在交换两张图片时遇到问题（从div插图到div gallerie）。

情境：点击一张小图片，然后用大图片换掉它。

以下是 HTML

<div id="gallerie">
    <img id="first" src="http://lorempicsum.com/futurama/620/350/2"><br/>
    <div id="vignette">
        <img class="second" src="http://lorempicsum.com/futurama/100/100/6">
        <img class="second" src="http://lorempicsum.com/futurama/100/100/4">
        <img class="second" src="http://lorempicsum.com/futurama/100/100/3">
        <img class="second" src="http://lorempicsum.com/simpsons/100/100/2">
        <img class="second" src="http://lorempicsum.com/simpsons/100/100/1">
        <img class="second" src="http://lorempicsum.com/simpsons/100/100/4">
    </div>
</div>

以下是 JavaScript

document.getElementById("vignette").addEventListener('click', changeSrc);
    function changeSrc(e) {
        var images = document.getElementsByClassName("second").src;
        var first = document.getElementById("first").src;
        s = e.target.src;
        first = s;
        console.log("click");
    }

目前，我不想使用jQuery。

某些网站上的解决方案直接在JS代码上使用＆＃34; if＆＃34;级联。我不认为这对我有效。

我可以建议在＆＃34; var image＆＃34;中使用for循环。但我不知道如何使用e.target。

我搜索执行我的代码，你能解释一下我为什么错了吗？

这是JsFiddle

https://jsfiddle.net/ws3f4san/

如果你愿意，我可以给你更多细节。

Answer 1

在这段代码中，您实际上并未设置来源，而是只覆盖您在first变量中存储为字符串的来源。

var images = document.getElementsByClassName("second").src;
var first = document.getElementById("first").src;
s = e.target.src;
first = s;

first = s;对页面没有任何影响，因为您只是更改JS变量，而不是dom元素。

您需要编辑实际的源属性，您可以通过在src变量中存储dom元素而不是初始first值来实现，如下所示：

var images = document.getElementsByClassName("second").src;
var first = document.getElementById("first"); // Store the dom element, not the string value
s = e.target.src;
first.src = s; // Now assign the new value to the src attribute of your stored dom element

编辑后仔细查看了您正在尝试做的事情，您可以像这样交换src：

function changeSrc(e) {
  // Get the initial dom element
  var mainItem = document.getElementById("first");
  // Save it's src before it's changed
  var mainItemImage = mainItem.src;
  // Get the clicked element
  var clickedItem = e.target;
  // Set the first image to the second image
  mainItem.src = clickedItem.src;
  // Set the second image to the first image's original value (which has now changed)
  clickedItem.src = mainItemImage;
}

交换图像（小转盘）

1 个答案: