如何使用 JS 更改图像的来源答案

【问题标题】：How to Change the Source of an Image W/JS如何使用 JS 更改图像的来源
【发布时间】：2015-12-28 17:54:51
【问题描述】：

我必须使用 java 脚本更改图像的 src，我很确定我遇到了障碍，在 html 中我有 3 个 li 元素，id 是 mouseenter img 的来源。我觉得我很近，但到目前为止。到目前为止，这是我的代码。谢谢你的帮助！

Javascript：

var $ = function (id) {
return document.getElementById(id);};

window.onload = function () {
var links = document.getElementsByTagName("li"),
    imgElements = document.getElementsByTagName("img"), 
    imgNode, 
    i, 
    URLone, 
    URLtwo, 
    link, 
    image;
for (i = 0; i < imgElements.length; i++) {
    imgNode = imgElements[i];
}
imgNode.mouseenter = function () {
    var img = this;
    URLtwo = img.getAttribute('id');
    img.src = URLtwo;
}
imgNode.mouseout = function () {
    var img = this;
    URLone = img.getAttribute('src');
    img.src = URLone;
};
 //preload
for (i = 0; i < links.length * 2; i++) {
    link = links[i];
    image = new Image();
    image.src = link.src;
    image = new Image();
    image.src = link.id;
}};

HTML ::

<body>
<section>
    <h1>Ram Tap Combined Test</h1>
    <ul id="image_rollovers">
        <li><img src="images/h1.jpg" alt="" id="images/h4.jpg"></li>
        <li><img src="images/h2.jpg" alt="" id="images/h5.jpg"></li>
        <li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
    </ul>        
</section>

工作 jQuery：

 $(document).ready(function() {
 $("#image_rollovers img").each(function() {
 var oldURL = $(this).attr("src"); // gets the src attribute
 var newURL = $(this).attr("id"); // gets the id attribute
 // preload images
 var rolloverImage = new Image();
 rolloverImage.src = newURL;
 $(this).hover(
 function() {
 $(this).attr("src", newURL); // sets the src attribute
 },
 function() {
 $(this).attr("src", oldURL); // sets the src attribute
 }
 ); // end hover
 }); // end each
}); // end ready

【问题讨论】：

描述你的路障。有什么问题？
我认为这可能与我试图理解和使用的节点或逻辑有关。这周对我来说是新的，阅读后我仍然不完全理解它
你反对使用jQuery吗？还有，这是作业吗？如果是这样，那么关于 SO 的规则会有些不同；用作业标签标记它。
虽然它不允许我这样做，因为我刚刚注册并且没有 1500 积分，否则我会。我不允许使用 jQuery 来完成这项任务，因为它已经在书中。
什么不起作用？原图不显示？没有显示onmouseover？不显示onmouseout？

标签： javascript html mouseenter mouseout

【解决方案1】：

for (i = 0; i < imgElements.length; i++) {
   (function(imgNode) {
      imgNode.addEventListener("mouseenter", function () {
         var img = this;
         URLtwo = img.getAttribute('id');
         img.src = URLtwo;
      }, false);

      imgNode.addEventListener("mouseout", function () {
         var img = this;
         URLone = img.getAttribute('src');
         img.src = URLone;
      }, false);
   })(imgElements[i]);
}

【讨论】：

【解决方案2】：

您的代码中存在一些问题。

首先 for 循环立即关闭，而应在您的 imgNode.mouseout 函数

for (i = 0; i < imgElements.length; i++) {
    imgNode = imgElements[i];

imgNode.mouseenter = function () {
    var img = this;
    URLtwo = img.getAttribute('id');
    img.src = URLtwo;
}
imgNode.mouseout = function () {
    var img = this;
    URLone = img.getAttribute('src');
    img.src = URLone;
};
}
 //preload
for (i = 0; i < links.length * 2; i++) {
    link = links[i];
    image = new Image();
    image.src = link.src;
    image = new Image();
    image.src = link.id;
}};

最后一个 for 循环运行了 6 次，但 html 中只有 3 个标签。当它来循环没有。 3 它没有为 link.src 获得任何价值。
另外 links 变量提供了 'li' 标签的集合而不是 'img'，最后一个 for 循环需要来自 link.src 的 src，它没有任何值，需要更改

var links = document.getElementsByTagName("li"), 到

var links = document.getElementsByTagName("img"),

试试看。希望在纠正上述错误后，您的代码应该可以正常工作。

【讨论】：

为什么在鼠标移出功能后for循环需要关闭感谢您在底部捕获循环和链接var
我不确定您是否只想将 mouseenter 和 mouseout 事件附加到 imgElements 数组中的最后一个元素。在您的代码中，循环完全运行，imgNode 中的值将是最后一个，事件将仅附加到最后一个元素。我不确定您运行 for 循环和附加事件的目的。