最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - hasClass() always returns false (jquery) even when toggling it - Stack Overflow

programmeradmin8浏览0评论

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=".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>

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./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>

Share Improve this question edited May 23, 2017 at 12:32 CommunityBot 11 silver badge asked Mar 23, 2017 at 2:38 stumpedstumped 3,2937 gold badges47 silver badges80 bronze badges 2
  • in your demo there is no class 'show-new-photo' in content – guradio Commented Mar 23, 2017 at 2:41
  • Also the selector "content" is quite distinctly different from ".content" – Pointy Commented Mar 23, 2017 at 2:41
Add a ment  | 

4 Answers 4

Reset to default 4

I believe

$(".content").find(".new-photo").toggleClass('show-new-photo');

only toggles the 'show-new-photo' class on the '.new-photo' element, not the ".content" element.

Unless I'm missing something

console.log($("content").hasClass('show-new-photo'));

will out put the same thing whether it's before or after

$(".content").find(".new-photo").toggleClass('show-new-photo');

because that line of code does not change whether or not $(".content") has the class "show-new-photo" or not.

Also it should be $(".content"), not $("content").

the hasClass method don´t work with child nodes.

You can use something like that

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

Try

console.log($(".content").hasClass('show-new-photo'));

I believe this should work by adding the class "." in your selector

As stated in another answer by Luiz Paulo Evangelista, the hasClass apparently don't work with child elements my solution is the following:

this.classList.contains("show-new-photo")

if using this, else

$(".content").context.classList.contains("show-new-photo")

i think it's a little more elegant maybe

发布评论

评论列表(0)

  1. 暂无评论