このhtmlコードに配列リストを実装するにはどうすればよいですか？

Question

私は最近、htmlに取り掛かり始めました。次のコードを実装してより効率的になり、arrayListを使用するにはどうすればいいですか？

<!-- 
This was me just trying to play around with arrays and elements 
var elements = document.getElementsByClassName("[id^=pop]"); 
var arr = jQuery.makeArray(elements); 
--> 
var p = $("[id^=pop]"); 
var position = p.position(); 
$("[id^=pop]").hover(function() { 
    $(this).css("cursor", "pointer"); 
    $(this).animate({ 
     width: "400px", 
     height: "400px", 
     top: position.top*.7, 
     left: position.left*.7 
    }, 150); 

}, function() { 
    $(this).animate({ 
     width: "300px", 
     height: "300px", 
     top: position.top, 
     left: position.left 
    }, 150); 

}); 

今のところ、画像IDがpop0に等しく、もう1つがpop1に等しいとき。両方とも、最初の画像の高さと幅にアニメートされます。すべてのimgが独自の位置を持ち、最初にロードされたイメージに基づいているのではなく、独自のトップと左の座標に基づいているように、配列を使用するにはどうすればよいですか？

Answer 1

コメントに記載されているとおり、position変数をホバーイベントハンドラーの外からホバーイベントハンドラー内に移動する必要があります。これにより、現在ホバリングされたアイテムにコンテキストが設定されます。

現在、p変数は、popで始まるIDで始まるすべての要素の配列を格納します。次に、最初の要素の位置への参照を格納していて、ホバーイベントハンドラの外側にpositionという値を設定して更新することはありません。

ここでは、キャッシュの小さなビットを使用しているため、常にDOMに照会するわけではありません。

var $pop = $('[id^=pop]'); 

$pop.hover(function hoverIn() { 

    var $this = $(this), 
     pos = $this.position(); 

    $this 
     .css('cursor', 'pointer') // <= Possibly do this via CSS. 
     .animate({ 
      width: '400px', 
      height: '400px', 
      top: pos.top * 0.7, 
      left: pos.left * 0.7 
     }, 150); 

}, function hoverOut() { 

    var $this = $(this), 
     pos = $this.position(); 

    $this.animate({ 
     width: '300px', 
     height: '300px', 
     top: pos.top, 
     left: pos.left 
    }, 150); 

});