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

Question

我目前有一个 javascript 函数，可以在鼠标悬停时模糊图像。这些图像中的每一个都代表一个元素，我有 5 个这样的元素，类别为“individual-project”。单个元素 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%)'});
});

目前，我需要将此 block 重复 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