Question

我正在尝试以更简单的方式复制此页面http://www.annedeckerarchitects.com/recognition/publications/的功能。我所指的功能是将鼠标放在右边的东西上并改变左边的图像。

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

老实说，我不知道为什么它不起作用。最好假设我是JS的新手。

感谢。

Answer 1

globalImage是一个jQuery集合。 globalImage.src不会更改元素的src属性。使用jQuery的attr函数来设置它。此外，您需要更加小心您的大写。 mouseOver应为mouseover，CreateElement应为createElement。

$(".scrolling-list>li")仅在<ul>为<ul class="scrolling-list">时才有效。

最后，如果在添加img.src事件处理程序之前分配onload，则可能会出现问题。如果图像被缓存，它可能会在有处理程序之前完成加载，这意味着您的代码根本不会执行。

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

另一种解决方案，如果你想绑定：

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

“aToBind”类仅用于将这些“a”与其余脚本中的其他“a”分开。

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

2 个答案: