Question

我现在正在搞jQuery。有6个<li>标签，其中自定义attr称为data-index="x"（x只是数字0到6）。基本上我试图申请循环而不是一遍又一遍地写它而我是＆＃39到目前为止已经失败了。

这是代码：

for (var i=0; i<6; i++) {
    var m = 'i*-40' + 'px'
    $('li[data-index="i"] p')
    .css( {backgroundPosition: "-150px m"} )
    .mouseover(function(){
        $(this).stop().animate({backgroundPosition:"(0 m)"}, {duration:300})
    })
    .mouseout(function(){
        $(this).stop().animate({backgroundPosition:"(-150px m)"}, {duration:300})
    });
}

Answer 1

像bellow

一样更改整个实现

for (var i=0; i<6; i++) {
    var m = i*40; //getting m as number not string
    $('li[data-index="'+i+'"] p')
    .css( {backgroundPosition: (-150+m) + 'px'} ) // add two numbers & then append to string
    .mouseover(function(){
        $(this).stop().animate({backgroundPosition:(0+m)+'px'}, {duration:300})
    })
    .mouseout(function(){
        $(this).stop().animate({backgroundPosition:(-150 +m)+'px'}, {duration:300})
    });
}

我对行-中的var m = i*40;符号感到有点困惑所以请检查一次。

Answer 2

字符串中的变量不会被神奇地评估。

您应该使用类似

的内容

for (var i=0; i<6; i++) {
    var m = i*-40 + 'px';
    $('li[data-index="' + i + '"] p')
    .css( {backgroundPosition: "-150px " + m} )
    .on('mouseover', function(){
        $(this).stop().animate({backgroundPosition:"0 " + m}, 300)
    })
    .on('mouseout', function(){
        $(this).stop().animate({backgroundPosition:"-150px " + m}, 300)
    });
}

为所有相关标签应用函数 - jquery

2 个答案: