如何访问div中的图像属性?JQuery

Question

Hey需要快速解决一个问题。我有以下脚本：

jQuery(function($){ 
$(window).scroll(function (){
if ($(this).scrollTop() > 1){ 
$('.logo-customizer').attr('src','http://13.36.14.143/wp-content/uploads/2021/01/cropped-ssssssss-1.png');
}
if ($(this).scrollTop() < 1000){ 
$('.logo-customizer').attr('src','http://13.36.14.143/wp-content/uploads/2021/01/cropped-ssssssss.png');
}
})
});

我希望当我向下滚动页面时，图像会发生变化。目前，图像发生了更改，但更改了div属性，而不是div中的img属性：

这是HTML代码：

<div class="logo-customizer" src="http://13.36.14.143/wp-content/uploads/2021/01/cropped-ssssssss-1.png"><img src="https://13.36.14.143/wp-content/uploads/2021/01/cropped-ssssssss.png" alt="Starford" width="120" height="35"></div>

Answer 1

尝试在选择器中指定子元素

jQuery(function($){ 
$(window).scroll(function (){
if ($(this).scrollTop() > 1){ 
$('.logo-customizer img').attr('src','http://13.36.14.143/wp-content/uploads/2021/01/cropped-ssssssss-1.png');
}
if ($(this).scrollTop() < 1000){ 
$('.logo-customizer img').attr('src','http://13.36.14.143/wp-content/uploads/2021/01/cropped-ssssssss.png');
}
})
});

Answer 2

<div>
<img src="https://13.36.14.143/wp-content/uploads/2021/01/cropped-ssssssss.png" class="logo-customizer" alt="Starford" width="120" height="35"/>
</div>

您在脚本中设置div元素的src，因为您为div而不是img标记设置了类名。

Answer 3

您没有选择图像，而是选择需要使用$('.logo-customizer img')而不是$('.logo-customizer')的div。

Answer 4

最佳解决方案是@Solerman-Kaplon解决方案，但您也可以在$('.logo-customizer')对象上使用find()方法：

jQuery(function($){ 
$(window).scroll(function (){
if ($(this).scrollTop() > 1){ 
$('.logo-customizer').find('img').attr('src','http://13.36.14.143/wp-content/uploads/2021/01/cropped-ssssssss-1.png');
}
if ($(this).scrollTop() < 1000){ 
$('.logo-customizer').find('img').attr('src','http://13.36.14.143/wp-content/uploads/2021/01/cropped-ssssssss.png');
}
})
});