Question

我希望我的身体div的背景在每个链接悬停时更改为不同的图像。这是我的代码，在第一个旁边删除了链接部分作为示例：

JAVASCRIPT：

var i = 0,
    anchors = document.querySelectorAll("zoom"),
    background = document.getElementById("body");

function backgroundChange() {
    "use strict";

    window.console.log("hey");

    if (event.target.id === "4Mo3We2Days") {
        background.style.background = "url('../Images/movies/4Mo3We2Days.png')";
    ...
    other specific ids
    ...
    }
}

function backgroundRemove() {
    "use strict";

    background.style.backgroundImage = "none";
}

for (i = 0; i < anchors.length; i += 1) {
    anchors[i].addEventListener("mouseover", backgroundChange, false);
    anchors[i].addEventListener("mouseout", backgroundRemove, false);
    window.console.log("yo");
}

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" type = "text/css" href = "../CSS/JMWStyles.css">
        <title>Archives</title>
        <meta charset="UTF-8">
    </head>
    <body>

        <header>
            <img id = "logo" src = "../Images/logo.png" alt = "logo" href = "../JMW.htm"></img>
            <ul id = "navMenu">
                <li class = "nav"><a id = "button5" class = "navItem" href = "../JMW_Store.htm">Store</a></li>
                <li class = "nav"><a id = "button4" class = "navItem" href = "../JMW_Archives.htm">Archives</a></li>
                <li class = "nav"><a id = "button3" class = "navItem" href = "../JMW_About.htm">About</a></li>
                <li class = "nav"><a id = "button2" class = "navItem" href = "../JMW_Blog.htm">Blog</a></li>
                <li class = "nav"><a id = "button1" class = "navItem" href = "../JMW.htm">Home</a></li>
            </ul>


        </header>

        <hr>

        <div>
            ** Please Note that these were written for the radio and were meant to be read aloud. There are many typos as
            well as odd things to read. If you would like, leave a comment so I can fix it! <br>
            &emsp; - Jake Winters
        </div>

        <hr>

        <div id = "body">
            <ul class = "centered">
                <li><a class = "zoom" id = "4Mo3We2Days" href = "MovieReviews/4Mo3We2Days.htm">4 Months 3 Weeks and 2 Days</a></li>
                <li><a class = "zoom" id = "aMostViolentYear" href = "MovieReviews/aMostViolentYear.htm">A Most Violent year</a></li>
                <li><a class = "zoom" id = "pigeon" href = 
                       "MovieReviews/A%20Pigeon%20Sat%20on%20a%20Branch%20Reflecting%20on%20Existence.htm">A Pidgeon Sat
                       on a Branch Reflecting on Existence</a></li>
                <li><a class = "zoom" id = "akira" href = "MovieReviews/akira.htm">Akira</a></li>
                <li><a class = "zoom" id = "amadeus" href = "MovieReviews/Amadeus.htm">Amadeus</a></li>
                <li><a class = "zoom" id = "borgman" href = "MovieReviews/Borgman.htm">Borgman</a></li>
                <li><a class = "zoom" id = "briefInterviews" href = "MovieReviews/briefInterviewsWithHideousMen.htm">Brief Interviews with Hideous Men</a></li>
                <li><a class = "zoom" id = "bronson" href = "MovieReviews/bronson.htm">Bronson</a></li>
                <li><a class = "zoom" id = "catchMeDaddy" href = "MovieReviews/catchMeDaddy.htm">Catch Me Daddy</a></li>
                <li><a class = "zoom" id = "copCar" href = "MovieReviews/copCar.htm">Cop Car</a></li>
                <li><a class = "zoom" id = "gangsOfNY" href = "MovieReviews/gangsOfNewYork.htm">Gangs of New York</a></li>
                <li><a class = "zoom" id = "gattaca" href = "MovieReviews/gattaca.htm">Gattaca</a></li>
                <li><a class = "zoom" id = "hailCeaser" href = "MovieReviews/hailCeaser.htm">Hail Ceaser</a></li>
                <li><a class = "zoom" id = "hidden" href = "MovieReviews/hidden.htm">Hidden</a></li>
                <li><a class = "zoom" id = "hudsucker" href = "MovieReviews/theHudsuckerProxy.htm">The Hudsucker Proxy</a></li>
                <li><a class = "zoom" id = "inBruges" href = "MovieReviews/inBruges.htm">In Bruges</a></li>
                <li><a class = "zoom" id = "koyscatsi" href = "MovieReviews/koyaanisqatsi.htm">Koyaanisqatsi</a></li>
                <li><a class = "zoom" id = "leviathan" href = "MovieReviews/leviathan.htm">Leviathan</a></li>
                <li><a class = "zoom" id = "libre" href = "MovieReviews/libreEtAssoupi.htm">Libre et Assoupi</a></li>
                <li><a class = "zoom" id = "moon" href = "MovieReviews/moon.htm">Moon</a></li>
                <li><a class = "zoom" id = "mustang" href = "MovieRevies/mustang.htm">Mustang</a></li>
                <li><a class = "zoom" id = "niceGuys" href = "MovieReviews/niceGuys.htm">Nice Guys</a></li>
                <li><a class = "zoom" id = "onlyGodForgives" href = "MovieReviews/onlyGodForgives.htm">Only God Forgives</a></li>
                <li><a class = "zoom" id = "pansLab" href = "MovieReviews/pansLabyrinth.htm">Pans Labyrinth</a></li>
                <li><a class = "zoom" id = "planesTrains" href = "MovieReviews/planesTrainsAndAutomobiles.htm">Planes, Trains, and Automobiles</a></li>
                <li><a class = "zoom" id = "psycho" href = "MovieReviews/psycho.htm">Psycho</a></li>
                <li><a class = "zoom" id = "repoman" href = "MovieReviews/repoman.htm">Repoman</a></li>
                <li><a class = "zoom" id = "revenant" href = "MovieReviews/revenant.htm">Revenant</a></li>
                <li><a class = "zoom" id = "sevenPsycho" href = "MovieReviews/sevenPsychopaths.htm">Seven Psychopaths</a></li>
                <li><a class = "zoom" id = "seven" href = "MovieReviews/seven.htm">Seven</a></li>
                <li><a class = "zoom" id = "stillWalking" href = "MovieReviews/stillWalking.htm">Still Walking</a></li>
                <li><a class = "zoom" id = "theFifthElement" href = "MovieReviews/theFifthElement.htm">The Fifth Element</a></li>
                <li><a class = "zoom" id = "theIllusionist" href = "MovieReviews/theIllusionist.htm">The Illusionist</a></li>
                <li><a class = "zoom" id = "thePast" href = "MovieReviews/thePast.htm">The Past</a></li>
                <li><a class = "zoom" id = "theSurvivalist" href = "MovieReviews/theSurvivalist.htm">The Survivalist</a></li>
                <li><a class = "zoom" id = "theUsualSuspects" href = "MovieReviews/theUsualSuspects.htm">The Usual Suspects</a></li>
                <li><a class = "zoom" id = "theyLive" href = "MovieReviews/theyLive.htm">They Live</a></li>
                <li><a class = "zoom" id = "thisIsNotAFilm" href = "MovieReviews/thisIsNotAFilm.htm">This is not a Film</a></li>
                <li><a class = "zoom" id = "turboKid" href = "MovieReviews/turboKid.htm">Turbo Kid</a></li>
                <li><a class = "zoom" id = "weirdScience" href = "MovieReviews/weirdScience.htm">Weird Science</a></li>
                <li><a class = "zoom" id = "whatWeDoInShadows" href = "MovieReviews/whatWeDoInTheShadows.htm">What We do in the Shadows</a></li>
                <li><a class = "zoom" id = "waltzWithB" href = "MovieReviews/waltzWithBashir.htm">Waltz With Bashir</a></li>
                <li><a class = "zoom" id = "garp" href = "MovieReviews/worldAccordingToGarp.htm">World According to Garp</a></li>
                <li><a class = "zoom" id = "worldsGreatestDad" href = "MovieReviews/worldsGreatestDad.htm">World's Greatest Dad </a></li>
            </ul>
        </div>

        <footer>
            <hr id = "footerHr">

            <ul id = "socialMenu">
                <li class = "social"><a href = "spotify:user:1256028498"><img class = "footerImg" id = "spotify" src = "../Images/spotify.png" alt = "spotify"></a></img></li>
                <li class = "social"><a href = "https://www.instagram.com/jake_m_winters/"><img class = "footerImg" id = "insta" src = "../Images/insta.png" alt = "insta"></img></a></li>
                <li class = "social"><a href = "https://www.linkedin.com/in/JacobMWinters"><img class = "footerImg" id = "linkedIn" src = "../Images/linkedin.png" alt = "linkedIn"></img></a></li>
                <li class = "social"><a href = "https://soundcloud.com/user-311952172"><img class = "footerImg" id = "soundCloud" src ="../Images/soundcloud.png"></img></a></li>
            </ul>
        </footer>

    </body>

    <script src = "../JS/JMW.js"></script>
    <script src = "../JS/archive.js"></script>
</html>

CSS：

#body {
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
}

我正在添加听众吗？我如何从我定义的函数中知道导致事件发生的元素是什么？ event.target.id对吗？

我尝试了一些方法，但已经找到了很多方法。我不想使用jQuery，因为我正在尝试学习基本的javascript。如果你觉得这真的更适合jQuery，请告诉我原因。非常感谢任何帮助。谢谢！

另一个侧面问题，如果你知道你的头脑，我只想要答案：我想要将我使用的背景图像设置为具有白色圆形小插图的样式，以便将背景发送到背景中。我还希望所有图像的alpha都改变了。再一次，这不是我的主要问题，可以忽略

Answer 1

您未正确选择锚点。由于您定位了一个类，因此需要在zoom之前添加点：

anchors = document.querySelectorAll(".zoom"),

其次，您需要在IE以外的浏览器中传递event参数以获得支持：

function backgroundChange(event) {

Answer 2

最大的问题是您的querySelectorAll("zoom")，因为您正在寻找课程，所以需要querySelectorAll(".zoom")。因此，您从未成功访问任何想要连接到事件处理程序的链接。

您还有一些无效的HTML（<img>元素没有得到结束标记。）

event对象自动作为第一个参数传递给事件处理函数，因此这是访问它的标准方法。仅访问event（作为全局）是特定于IE的，并且还会阻止您在某些浏览器中访问event.target。正如我在评论中所述，this是引用调用事件的DOM对象的另一种方式，因此this.id将为您提供与event.target.id相同的对象引用。

最后，我建议您更改一些标识符名称（body除了id元素外，不应该只是<body>。

我添加说明，当鼠标移入和移出时，更改相关部分的颜色，仅用于演示。

请参阅下面的内联评论：

var i = 0,
// You are looking for classes, so your selector needs to start with a "."
anchors = document.querySelectorAll(".zoom"),
body = document.getElementById("main");

// Every event callback function will automatically 
// be passed a reference to the event it is responding
// to. Access that event by setting up a callback
// argument (evt here). Accessing the event via "event" 
// is specific to older versions of Internet Explorer.
function backgroundChange(evt) {
  "use strict";

    console.log("hey");

    // evt.target references the same thing as "this" in this case
    if (this.id === "4Mo3We2Days") {
        body.style.background = "url('../Images/movies/4Mo3We2Days.png')";
        
        // This is just for testing
        body.style.backgroundColor = "yellow";
        //other specific ids
    }
}

function backgroundRemove() {
    "use strict";
    body.style.backgroundImage = "none";
    
    // Just for testing
    body.style.backgroundColor = "initial";
}

for (i = 0; i < anchors.length; i += 1) {
    // .addEventListener uses false as the default for the third argument, so you don't have to add it
    anchors[i].addEventListener("mouseover", backgroundChange);
    anchors[i].addEventListener("mouseout", backgroundRemove);
}

#main {
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
}

<header>
   <!-- img elements don't get closed, there is no such thing as </img> -->
   <img id="logo" src = "../Images/logo.png" alt = "logo" href = "../JMW.htm">
   <ul id="navMenu">
     <li class="nav"><a id = "button5" class = "navItem" href = "../JMW_Store.htm">Store</a></li>
     <li class="nav"><a id = "button4" class = "navItem" href = "../JMW_Archives.htm">Archives</a></li>
     <li class="nav"><a id = "button3" class = "navItem" href = "../JMW_About.htm">About</a></li>
     <li class="nav"><a id = "button2" class = "navItem" href = "../JMW_Blog.htm">Blog</a></li>
     <li class="nav"><a id = "button1" class = "navItem" href = "../JMW.htm">Home</a></li>
   </ul>
</header>

<hr>

<div>
 ** Please Note that these were written for the radio and were meant to be read aloud. 
    There are many typos as well as odd things to read. If you would like, 
    leave a comment so I can fix it! <br>
    &emsp; - Jake Winters
</div>

<hr>

<!-- Don't identify something that isn't the <body> as body. It's confusing -->
<div id="main">
  <ul class="centered">
    <li><a class = "zoom" id = "4Mo3We2Days" href = "MovieReviews/4Mo3We2Days.htm">4 Months 3 Weeks and 2 Days</a></li>
    <li><a class = "zoom" id = "aMostViolentYear" href = "MovieReviews/aMostViolentYear.htm">A Most Violent year</a></li>
    <li><a class = "zoom" id = "pigeon" href = 
                       "MovieReviews/A%20Pigeon%20Sat%20on%20a%20Branch%20Reflecting%20on%20Existence.htm">A Pidgeon Sat
                       on a Branch Reflecting on Existence</a></li>
    <li><a class = "zoom" id = "akira" href = "MovieReviews/akira.htm">Akira</a></li>
    <li><a class = "zoom" id = "amadeus" href = "MovieReviews/Amadeus.htm">Amadeus</a></li>
    <li><a class = "zoom" id = "borgman" href = "MovieReviews/Borgman.htm">Borgman</a></li>
    <li><a class = "zoom" id = "briefInterviews" href = "MovieReviews/briefInterviewsWithHideousMen.htm">Brief Interviews with Hideous Men</a></li>
    <li><a class = "zoom" id = "bronson" href = "MovieReviews/bronson.htm">Bronson</a></li>
    <li><a class = "zoom" id = "catchMeDaddy" href = "MovieReviews/catchMeDaddy.htm">Catch Me Daddy</a></li>
    <li><a class = "zoom" id = "copCar" href = "MovieReviews/copCar.htm">Cop Car</a></li>
    <li><a class = "zoom" id = "gangsOfNY" href = "MovieReviews/gangsOfNewYork.htm">Gangs of New York</a></li>
    <li><a class = "zoom" id = "gattaca" href = "MovieReviews/gattaca.htm">Gattaca</a></li>
    <li><a class = "zoom" id = "hailCeaser" href = "MovieReviews/hailCeaser.htm">Hail Ceaser</a></li>
    <li><a class = "zoom" id = "hidden" href = "MovieReviews/hidden.htm">Hidden</a></li>
    <li><a class = "zoom" id = "hudsucker" href = "MovieReviews/theHudsuckerProxy.htm">The Hudsucker Proxy</a></li>
    <li><a class = "zoom" id = "inBruges" href = "MovieReviews/inBruges.htm">In Bruges</a></li>
    <li><a class = "zoom" id = "koyscatsi" href = "MovieReviews/koyaanisqatsi.htm">Koyaanisqatsi</a></li>
    <li><a class = "zoom" id = "leviathan" href = "MovieReviews/leviathan.htm">Leviathan</a></li>
    <li><a class = "zoom" id = "libre" href = "MovieReviews/libreEtAssoupi.htm">Libre et Assoupi</a></li>
    <li><a class = "zoom" id = "moon" href = "MovieReviews/moon.htm">Moon</a></li>
    <li><a class = "zoom" id = "mustang" href = "MovieRevies/mustang.htm">Mustang</a></li>
    <li><a class = "zoom" id = "niceGuys" href = "MovieReviews/niceGuys.htm">Nice Guys</a></li>
    <li><a class = "zoom" id = "onlyGodForgives" href = "MovieReviews/onlyGodForgives.htm">Only God Forgives</a></li>
    <li><a class = "zoom" id = "pansLab" href = "MovieReviews/pansLabyrinth.htm">Pans Labyrinth</a></li>
    <li><a class = "zoom" id = "planesTrains" href = "MovieReviews/planesTrainsAndAutomobiles.htm">Planes, Trains, and Automobiles</a></li>
    <li><a class = "zoom" id = "psycho" href = "MovieReviews/psycho.htm">Psycho</a></li>
    <li><a class = "zoom" id = "repoman" href = "MovieReviews/repoman.htm">Repoman</a></li>
    <li><a class = "zoom" id = "revenant" href = "MovieReviews/revenant.htm">Revenant</a></li>
    <li><a class = "zoom" id = "sevenPsycho" href = "MovieReviews/sevenPsychopaths.htm">Seven Psychopaths</a></li>
    <li><a class = "zoom" id = "seven" href = "MovieReviews/seven.htm">Seven</a></li>
    <li><a class = "zoom" id = "stillWalking" href = "MovieReviews/stillWalking.htm">Still Walking</a></li>
    <li><a class = "zoom" id = "theFifthElement" href = "MovieReviews/theFifthElement.htm">The Fifth Element</a></li>
    <li><a class = "zoom" id = "theIllusionist" href = "MovieReviews/theIllusionist.htm">The Illusionist</a></li>
    <li><a class = "zoom" id = "thePast" href = "MovieReviews/thePast.htm">The Past</a></li>
    <li><a class = "zoom" id = "theSurvivalist" href = "MovieReviews/theSurvivalist.htm">The Survivalist</a></li>
    <li><a class = "zoom" id = "theUsualSuspects" href = "MovieReviews/theUsualSuspects.htm">The Usual Suspects</a></li>
    <li><a class = "zoom" id = "theyLive" href = "MovieReviews/theyLive.htm">They Live</a></li>
    <li><a class = "zoom" id = "thisIsNotAFilm" href = "MovieReviews/thisIsNotAFilm.htm">This is not a Film</a></li>
    <li><a class = "zoom" id = "turboKid" href = "MovieReviews/turboKid.htm">Turbo Kid</a></li>
    <li><a class = "zoom" id = "weirdScience" href = "MovieReviews/weirdScience.htm">Weird Science</a></li>
    <li><a class = "zoom" id = "whatWeDoInShadows" href = "MovieReviews/whatWeDoInTheShadows.htm">What We do in the Shadows</a></li>
    <li><a class = "zoom" id = "waltzWithB" href = "MovieReviews/waltzWithBashir.htm">Waltz With Bashir</a></li>
    <li><a class = "zoom" id = "garp" href = "MovieReviews/worldAccordingToGarp.htm">World According to Garp</a></li>
    <li><a class = "zoom" id = "worldsGreatestDad" href = "MovieReviews/worldsGreatestDad.htm">World's Greatest Dad </a></li>
  </ul>
</div>

<footer>
  <hr id = "footerHr">
  <ul id = "socialMenu">
    <li class = "social"><a href = "spotify:user:1256028498"><img class = "footerImg" id = "spotify" src = "../Images/spotify.png" alt = "spotify"></a></li>
    <li class = "social"><a href = "https://www.instagram.com/jake_m_winters/"><img class = "footerImg" id = "insta" src = "../Images/insta.png" alt = "insta"></a></li>
    <li class = "social"><a href = "https://www.linkedin.com/in/JacobMWinters"><img class = "footerImg" id = "linkedIn" src = "../Images/linkedin.png" alt = "linkedIn"></a></li>
    <li class = "social"><a href = "https://soundcloud.com/user-311952172"><img class = "footerImg" id = "soundCloud" src ="../Images/soundcloud.png"></a></li>
  </ul>
</footer>

我试图用Javascript处理鼠标事件并遇到一些问题

2 个答案: