Changing img src with jquery - checking class change

Question

I have a navbar that's class changes when I scroll down, I am trying to change my img src when this class changes, I have tried visiting other questions but havent been able to match anything up yet.

im using material design template and my class changes from

navbar-transparent navbar-color-on-scroll fixed-top navbar-expand-lg 
navbar-transparent

to:

navbar-transparent navbar-color-on-scroll fixed-top navbar-expand-lg

When it changes I want to change my img src to my black image.

I think part of my problem is my starting class already has the name of the second part?

so this does not work:

the logo is just the black one:

    if ($('.navbar').hasClass('navbar-transparent navbar-color-on-scroll fixed-top navbar-expand-lg navbar-transparent')) {
      $('.navbar-brand').attr('src','ZeusLogoWhite.png')

  } else  { ($('.navbar').hasClass('navbar-transparent navbar-color-on-scroll fixed-top navbar-expand-lg')) 
    $('.navbar-brand').attr('src','zeusAssistantBlackLogo.png')

The html looks like this:

 <nav class="navbar navbar-transparent navbar-color-on-scroll fixed-top navbar-expand-lg" color-on-scroll="100" id="sectionsNav">
    <div class="container">
      <div class="navbar-translate">
      <!-- Insert logo! -->
        <!-- <a class="navbar-brand" href="https://demos.creative-tim.com/material-kit/index.html">
          Zeus Assistant </a> -->
          <img src="ZeusLogoWhite.png" alt="Thumbnail Image" class="navbar-brand">

I think the way the classes change is the wrong way around for me to use?

any thoughts?

I want my black image to show after the class changes!

Thanks if you can help!

Answer 1

1. You are repeating the same classes. You should add to one of them an UNIQUE CLASS in order to make it work.
2. The else dosen't need a condition.

If this the only element with .navbar-brand, it should be:

if ($('.navbar').hasClass('AN UNIQUE CLASS')) {
  $('.navbar-brand').attr('src','ZeusLogoWhite.png')
} 
else  { 
  $('.navbar-brand').attr('src','zeusAssistantBlackLogo.png')
 }

Hope that help.