php - 重复函数只是改变一个 var

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

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

例如

$('.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);
    });
});