坚持一些Javascript - 在文本的鼠标悬停上显示图像

Question

I'm trying to replicate the functionality of this page http://www.annedeckerarchitects.com/recognition/publications/ in a simpler way. The functionality I'm referring to is mousing over on something on the right and changing the image on the left.

What I have; https://jsfiddle.net/7j2zkndx/3/

html:

<img class="global-image" />
<div class="scrolling-list">
<ul>
    <li data-link="http://i.imgur.com/ne3L7hy.jpg">Link Test <a href="#">click for more</a></li>
    <li data-link="http://i.imgur.com/mwa1Wwl.jpg">Link Test 2 <a href="#">click for more</a></li>
</ul>
</div>

javascript;

var globalImage = $(".global-image").first();
$(".scrolling-list>li").each(function() {
    var list = this;
    var img = document.CreateElement("img");
    img.src = $(list).getAttribute("data-link");
    img.addEventListener("load", function() {
        list.addEventListener("mouseOver", function() {
            globalImage.src = $(list).getAttribute("data-link");
        });
    });
}();

css;

.scrolling-list {
    width: 600px;
    height: 600px;
    overflow: scroll;
}
.global-image. .scrolling-list {
    display: inline-block;
}

I'm honestly at a loss why it isn't working. It would be best to assume I'm a novice in JS.

Thanks.

Answer 1

globalImage is a jQuery collection. globalImage.src won't change the src attribute of the element. Use jQuery's attr function to set it. Also, you need to be more careful with your capitalization. mouseOver should be mouseover , CreateElement should be createElement .

$(".scrolling-list>li") only works if your <ul> is <ul class="scrolling-list"> .

Lastly, you can have issues if you assign img.src before adding the onload event handler. If the image is cached, it might finish loading before there is a handler, which means that your code won't execute at all.

Fiddle

var globalImage = $(".global-image").first();
$(".scrolling-list>li").each(function() {
    var list = this;
    var img = document.createElement("img");

    img.addEventListener("load", function() {
        list.addEventListener("mouseover", function() {
            globalImage.attr("src", $(list).attr("data-link"));
        });
    });
    img.src = $(list).attr("data-link");
    console.log(img.src);
});

Answer 2

Another solution, if you want to bind :

HTML :

<img class="global-image" />
<div>
    <ul class="scrolling-list">
        <li data-link="https://i.imgur.com/ne3L7hy.jpg">Link Test <a href="#" class="aToBind">click for more</a></li>
        <li data-link="https://i.imgur.com/mwa1Wwl.jpg">Link Test 2 <a href="#" class="aToBind">click for more</a></li>
    </ul>
</div>

Javascript :

$("a.aToBind").mouseover(function(){
    let liParent = $(this).parent("li");
    $(".global-image").attr("src", $(liParent).attr("data-link"));
})

The class "aToBind" is only use to separate these "a" from other "a" in the rest of script.