Как я могу реализовать список массивов для этого 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); 

}); 

На данный момент, когда идентификатор изображения равен pop0, а затем еще один равный pop1. Оба они оживят высоту и ширину первого изображения. Как я могу использовать массив, чтобы каждый img имел свою собственную позицию и не основывался бы на первом загруженном изображении, а скорее на их собственных верхних и левых координатах?

Answer 1

Как указано в комментариях, вам нужно переместить переменную position снаружи обработчиков событий hover внутри ваших обработчиков событий hover. Это установит контекст текущего элемента, зависящего от текущего.

В настоящее время переменная p хранит массив всех элементов, начинающихся с идентификатора, начинающегося с pop. Затем вы сохраняете ссылку на позицию первого элемента и никогда не обновляете, устанавливая значение position вне ваших обработчиков событий hover.

Вот пример с небольшим количеством кеширования, поэтому вы не всегда запрашиваете 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); 

});