Question

我必须使用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

Answer 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]);
}

Answer 2

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

首先关闭循环，然后关闭你的 imgNode.mouseout函数

＆＃13;

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

＆＃13;

最后for循环运行6次，但html中只有3个标签。什么时候循环没有。 3它没有为link.src获取任何值。
链接变量也提供了一个＆＃39; li＆＃39;标签而不是＆＃39; img＆＃39;，last for循环需要来自link.src的src，它没有任何值，需要更改

var links = document.getElementsByTagName（＆＃34; li＆＃34;），到

var links = document.getElementsByTagName（＆＃34; img＆＃34;），

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

如何更改图像来源W / JS

2 个答案: