我正在尝试在 javascript 中交换图像

Question

I am trying to swap the src image with the id image.我正在尝试将 src 图像与 id 图像交换。 From what I see on other examples I thought this would be the way to go about doing it.从我在其他示例中看到的情况来看，我认为这将是进行此操作的方法。 It definitely does not work for me.它绝对不适合我。 This is my first time posting here so any help with formatting my question would be greatly appreciated also.这是我第一次在这里发帖，因此对格式化我的问题的任何帮助也将不胜感激。

HTML: HTML：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Image Rollovers</title>
    <link rel="stylesheet" href="main.css">
    <script src="rollover.js"></script>
</head>

<body>
    <section>
        <h1>Image Rollovers</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>
</body>
</html>

Javascript: Javascript：

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

//MOUSE EVENT FUNCTIONS
var rollover = function(evt) {
    var link = this;
    var imageNode = $("img");
    imageNode.setAttribute("img", link.getAttribute("id"));
}

var rollout = function(evt) {
    var link = this;
    var imageNode = $("id");
    imageNode.setAttribute("id", link.getAttribute("img"));
}

//ONLOAD EVENT HANDLER      
window.onload = function () {

        //GET ALL IMG TAGS
        var linkNode = $("image_rollovers");
        var images = linkNode.getElementsByTagName("img");
        //PROCESS EACH IMAGE
        var i, linkNode, image;
        for ( i=0; i<images.length; i++)
        {
            linkNode = images[i];
            linkNode.onmouseover = rollover;
            linkNode.onmouseout = rollout; 
        }
}

Answer 1

First, you have a typo in the HTML, you're missing the > at the end of the third <img .首先，您在 HTML 中有一个拼写错误，您缺少第三个<img末尾的> 。

        <li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
                                                              ^

Second, you're calling $("img") and $("id") , but there are no elements with those IDs.其次，您正在调用$("img")和$("id") ，但没有具有这些 ID 的元素。 You should just be setting a variable to the appropriate attribute of link .您应该只为link的适当属性设置一个变量。 There's no need for different functions for rollover and rollout , since they both just swap the id and src attributes. rollover和rollout不需要不同的函数，因为它们都只是交换了id和src属性。

//MOUSE EVENT FUNCTIONS
function swap_src_and_id(evt) {
    var link = this;
    var src = link.getAttribute("src");
    link.setAttribute("src", link.getAttribute("id"));
    link.setAttribute("id", src);
}

Third, you're calling linkNode.getElementsByTagName("src") , but there's no such tag.第三，您正在调用linkNode.getElementsByTagName("src") ，但没有这样的标签。 It should be img .它应该是img 。

window.onload = function () {

    //GET ALL IMG TAGS
    var linkNode = $("image_rollovers");
    var images = linkNode.getElementsByTagName("img");
    //PROCESS EACH IMAGE
    var i, linkNode, image;
    for ( i=0; i<images.length; i++)
    {
        linkNode = images[i];
        linkNode.onmouseover = swap_src_and_id;
        linkNode.onmouseout = swap_src_and_id; 
    }
}

我正在尝试在 javascript 中交换图像

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-10-30 22:12:22

我正在尝试在 javascript 中交换图像

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-10-30 22:12:22

解决方案1
0 已采纳 2017-10-30 22:12:22