Question

这就是我所拥有的，它有效，但我想知道它是否更容易？

$('.item1').click(function(){
    $('.otheritem').animtate('left':'0');
});
$('.item2').click(function(){
    $('.otheritem').animtate('left':'100');
});
$('.item3').click(function(){
    $('.otheritem').animtate('left':'200');
});
// etc etc etc

我有一个使用php foreach的文件并生成一些项目。

foreach($images as $image)
{
    $i++;
    echo "<a class='item$i item' href='#'>$i</a>";
}

所以图片越多，项目越多，所以如果你点击php生成的其中一个项目，它将确定.otheritem的位置

Answer 1

如果所有项目都是固定宽度，您可以根据它在列表中的位置来计算位置。

e.g。

$('.buttons').click( function() {
    $('.otheritem').animate('left', $(this).index() * 100);
});

Answer 2

您可以将更改值嵌入到元素的数据属性中，并为所有元素提供相同的选择器 -

$animLeft = $i * 100;
echo "<a class='item' href='#' data-animleft='{$animLeft}' >$i</a>";

现在，您的jQuery可以使用相同的名称访问所有元素，并提取动画的值：

$('.item').on('click',function(){
  var animateValue = $(this).data('animleft');
  $('.otheritem').animtate('left':animateValue);
});

参考文献 -

$.data()

Answer 3

这样的东西？

$('.item').each(function(i) {
    $(this).click(function() {
        $('.otheritem').animate('left', i * 100);
    });
});

重复函数只需更改一个var

3 个答案: