Question

我在一个画廊工作，我需要在叠加div悬停时为图像添加一个类。

这是我的HTML

 <div class="overlayForCarDetails"></div>
 <a href="img/car_details/1large.jpg" rel="shadowbox">
   <img class="mediumImg" src="img/car_details/1medium.jpg" alt="">
 </a>

这是我的javascript

        $('.overlayForCarDetails').mouseenter(function () {
            $(this).css('opacity', '0.7');
            $(this).closest('.mediumImg').addClass('zoomed');

        });

但不知怎的，它不起作用。你能告诉我我做错了吗？感谢。

Answer 1

尝试从中选择.next()兄弟和.find()相关元素。

$(this).next('a').find('.mediumImg').addClass('zoomed');

完整代码将是，

 $('.overlayForCarDetails').mouseenter(function () {
   $(this).css('opacity', '0.7');
   $(this).next('a').find('.mediumImg').addClass('zoomed');
 });

Answer 2

您必须使用.next()和.find()代替.closest()（最近的查找层次结构），如下所示：

$('.overlayForCarDetails').mouseenter(function () {
            $(this).css('opacity', '0.7');
            $(this).next().find('.mediumImg').addClass('zoomed');

        });

Answer 3

您需要nextAll()或siblings()才能在DOM的层次结构树中获得相同级别的a个元素。然后，您需要使用find()来获取.mediumImg后代中的a closest()查看DOM层次结构中元素的祖先。

$('.overlayForCarDetails').mouseenter(function () {
     $(this).css('opacity', '0.7');
     $(this).next('a').find('.mediumImg').addClass('zoomed');
});

next()

描述：获取匹配元素集中每个元素的所有后续兄弟，可选择使用选择器进行过滤。

抓住最接近的元素

3 个答案: