Question

我目前有一个javascript函数，将鼠标悬停在图像上时会模糊图像。这些图像中的每一个都代表一个项目，而我有5个此类项目为“个人项目”。单个项目div中的img类别为“ project-img”。

$('.individual-project').eq(0).hover(function() {
    $('.project-img').eq(0).css({'filter': 'blur(3px)', 'transform': 'scale(1.1, 1.1)', '-webkit-filter': 'blur(3px)', '-webkit-transform': 'scale(1.1, 1.1)', '-moz-filter': 'blur(3px)', '-moz-transform': 'scale(1.1, 1.1)'});
}, function() {
    $('.project-img').eq(0).css({'filter': 'blur(0px) brightness(100%)'});
});

目前，我需要重复执行此块5次，并为每个项目更改eq函数内部的值，以使其模糊而不会模糊其他所有项目。使选择器适用于具有相同类的各个div的任何帮助都将非常有用。谢谢。

Answer 1

如果只想影响每个项目中的项目图像，则要使用上下文查找。

$('.individual-project').hover(function(e) {
  $('.project-img', e.target).css({
    'filter': 'blur(3px)',
    'transform': 'scale(1.1, 1.1)',
    '-webkit-filter': 'blur(3px)',
    '-webkit-transform': 'scale(1.1, 1.1)',
    '-moz-filter': 'blur(3px)',
    '-moz-transform': 'scale(1.1, 1.1)'
  });
}, function(e) {
  $('.project-img', e.target).css({
    'filter': 'blur(0px) brightness(100%)'
  });
});

您可以选择为$()方法提供的第二个参数是搜索匹配项的上下文。 $(selector)与执行$(selector, document)相同。提供第二个参数将覆盖默认上下文。

参考http://api.jquery.com/jQuery/#jQuery1

jQuery：选择一个具有相同类名的元素而不重复代码？

1 个答案: