我最近刚开始接触 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 都有自己的位置,并且不会基于加载的第一张图像,而是基于它们自己的顶部和左侧坐标?
最佳答案
如评论中所述,您需要将 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 );
} );
关于javascript - 如何为这个 html 代码实现一个数组列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40345328/