javascript - How can you access a image attribute inside a div? JQuery

Question

Hey need to solve a very quick issue. I have the following script:

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');
        }
    })
});

And I want that when i scroll down the page, the image gets changed. For now, the image gets changed, but it gets changed on the div attribute and not the img attribute inside the div:

This is the HTML code:

<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

Try especifing the sub-element in the selector

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');
        }
    })
});