重复函数，只改变一个变量 - repeating functions just changing one var

repeating functions just changing one var

本文关键字：一个变量改变函数 | 更新日期: 2023-09-27

这就是我所拥有的，它可以工作，但我想知道它是否可以更容易?

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

的位置

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

$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()

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

。

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

像这样?

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