javascript - 如何为这个 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，然后另一个图像 id 等于 pop1 时。它们都将根据第一张图像的高度和宽度进行动画处理。我如何使用数组，以便每个 img 都有自己的位置，并且不会基于加载的第一张图像，而是基于它们自己的顶部和左侧坐标？

Answer 1

如评论中所述，您需要将 position 变量从悬停事件处理程序外部移动到悬停事件处理程序内部。这会将上下文设置为当前悬停的元素。

当前，您的 p 变量存储一个包含所有元素的数组，这些元素的 ID 以 pop 开头。然后，您将存储对第一个元素位置的引用，并且永远不会通过在悬停事件处理程序之外设置 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 );

} );