いくつかのJavascriptでスタック - テキストのマウスオーバー時に画像を表示

Question

私はこのページの機能を簡単な方法で複製しようとしています。http://www.annedeckerarchitects.com/recognition/publications/私が参照している機能は、右のものにマウスオーバーし、左の画像を変更することです。

私が持っているもの; 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> 

ジャバスクリプト。

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">の場合にのみ動作します。

最後に、onloadイベントハンドラを追加する前にimg.srcを割り当てた場合に問題が発生する可能性があります。イメージがキャッシュされている場合、ハンドラが存在する前に読み込みが終了する可能性があります。つまり、コードがまったく実行されません。あなたがバインドしたい場合は

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"を区別するために使用します。