Search code examples
javascriptjqueryhtmlcss

hasClass() always returns false (jquery) even when toggling it

It prints out false for every single log to the console. Toggling works fine when clicking the nav link and cancel button. I've look at this question and tried all the suggestions but still had the same problem. 

// add new photo toggle
$('#click_new_photo a').click(function() {
  console.log($(".content").hasClass('show-new-photo'));
  $(".content").find(".new-photo").toggleClass('show-new-photo');
  console.log($(".content").hasClass('show-new-photo'));
});

$("#cancel_add_new_photo").click(function() {
  console.log($(".content").hasClass('show-new-photo'));
  $(".new-photo").toggleClass("show-new-photo");
  console.log($(".content").hasClass('show-new-photo'));
});
.new-photo {
  width: 300px;
  height: 200px;
  border-radius: 5px;
  background: #34609d;
  box-shadow: 1px 1px #d6d6d6;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 100;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.show-new-photo {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <nav>
    <ul>
      <li id="click_new_photo"><a href="#">New Photo</a></li>
    </ul>
  </nav>
  <div class="content">
    <div class="new-photo">
      <button id="cancel_add_new_photo">Cancel</button>
    </div>
    ...
  </div>
  ...
</body>

Solution

  • the hasClass method don´t work with child nodes.

    You can use something like that

    return $(".content").find('.show-new-photo').length > 0;