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

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