我将如何批量添加大量 jquery 脚本，在一个循环中只有一个细微的差异

How would I batch add a ton of jquery scripts with only one minor difference in a loop?

本文关键字：循环 一个 有一个 添加 何批量 jquery 脚本      更新时间：2023-09-26

这是我的代码。基本上，我正在根据鼠标的位置和滚动位置来计算大量图像的模糊。我想用大约 100 张图像来执行此操作，但我不想为了更改以下内容而复制此脚本 100 次：

var offset[x] = $('#img[x]').offset();

然后是公式：

'filter': 'blur(' + ((Math.abs(offset[x].top - e.pageY) - 30) / 20) + 'px)',

等等。

我可以循环执行此操作吗？

这是我目前拥有的。

$(document).on('mousemove', function(e){
    var offset1 = $("#img1").offset();
    var offset2 = $("#img2").offset();
    $("div.c").html(Math.abs(offset1.top - e.pageY));
    $('#img1').css({
        'filter': 'blur(' + ((Math.abs(offset1.top - e.pageY) - 30) / 20) + 'px)',
            '-webkit-filter': 'blur(' +((Math.abs(offset1.top - e.pageY) - 30) / 20) + 'px)',
            '-moz-filter': 'blur(' +((Math.abs(offset1.top - e.pageY) - 30) / 20) + 'px)',
            '-o-filter': 'blur(' + e.pageY - offset1.top + 'px)',
            '-ms-filter': 'blur(' + ((Math.abs(offset1.top - e.pageY) - 30) / 20) + 'px)'
    });
    $('#img2').css({
        'filter': 'blur(' + ((Math.abs(offset2.top - e.pageY) - 30) / 20) + 'px)',
            '-webkit-filter': 'blur(' +((Math.abs(offset2.top - e.pageY) - 30) / 20) + 'px)',
            '-moz-filter': 'blur(' +((Math.abs(offset2.top - e.pageY) - 30) / 20) + 'px)',
            '-o-filter': 'blur(' + e.pageY - offset2.top + 'px)',
            '-ms-filter': 'blur(' + ((Math.abs(offset2.top - e.pageY) - 30) / 20) + 'px)'
    });
});

谢谢！

你可以

使用 jQuery .each（）

$(document).on('mousemove', function(e){
    $( "img" ).each(function( index ) {
      // Do it for each image
      var currentImage = $(this);
      var offset = currentImage.offset();
      currentImage.css({
         'filter': 'blur(' + ((Math.abs(offset.top - e.pageY) - 30) / 20) + 'px)',
         '-webkit-filter': 'blur(' +((Math.abs(offset.top - e.pageY) - 30) / 20) + 'px)',
         '-moz-filter': 'blur(' +((Math.abs(offset.top - e.pageY) - 30) / 20) + 'px)',
         '-o-filter': 'blur(' + e.pageY - offset.top + 'px)',
        '-ms-filter': 'blur(' + ((Math.abs(offset.top - e.pageY) - 30) / 20) + 'px)'
      });
    });
});

您可以直接选择所有图像，而不是使用其 #ID 选择一个图像，或者将类添加到要选择的图像中，并使用 .each（） 遍历所有选定的元素。

相关文章：