jQuery: select 具有相同 class 名称且没有重复代码的单个元素？

Question

我目前有一个 javascript 功能，可以在悬停时模糊图像。这些图像中的每一个都代表一个项目，我有 5 个这样的项目 class "individual-project"。 individual 项目 div 中的 img 具有 class "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 函数内的值以模糊它而不模糊所有其他项目。任何有关让选择器为具有相同 class 的 individual 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: select 具有相同 class 名称且没有重复代码的单个元素？

jQuery: select a single element with same class name without repeating code?

html

javascript

css

jquery

jquery-selectors