이 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과 같고 다른 하나가 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); 

});