我如何实现数组列表到这个html代码

How can I implement an array list to this html code?

本文关键字：列表 代码 html 数组 何实现 实现      更新时间：2023-09-26

我最近刚开始接触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有自己的位置，不会基于第一个图像加载，而是他们自己的顶部和左侧坐标?

正如评论中提到的，您需要将您的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 );
} );
相关文章：