javascript - If working but not else if

Question

The 'if' scenario works but the else if does not. I am trying to toggle the images on the click of class="show-real-pixels"

<div class="image not-hidden">
      <img src="img/healthyout/WF-onboard.png">
</div>

<div class="image hidden">
      <img src="img/healthyout/HF-onboard.png">
</div>

<div class="btn pull-right show-real-pixels">show real pixels</div>  


$(".show-real-pixels").click(
      function () {

       if ($(".image").hasClass("hidden")) {
          $(".image").removeClass("hidden").addClass("not-hidden");
        }  
        else if ($(".image").hasClass("not-hidden")) {
          $(".image").removeClass("not-hidden").addClass("hidden");
        }
});

Answer 1

您可以使用.toggleClass()而不是 if else

$(".image").toggleClass("hidden not-hidden");

Answer 2

使用.toggleClass喜欢

$(".show-real-pixels").click(function () {

      $(".image").toggleClass("hidden not-hidden");
});

看到这个链接

Answer 3

试试这个我只为你的第二个图像切换编码，为此我删除了你的第一个 div 非隐藏类。这对您来说要容易得多，因为您已经编写了这些行，那么您只需更改几件事：

    $(document).ready(function () {
        $(".show-real-pixels").click(function () {
            var hidn = $(".image").hasClass("hidden");
            var hidnt = $(".image").hasClass("not-hidden");
            if (hidn) {
                $(".hidden").removeClass("hidden").addClass("not-hidden");
            } else if (hidnt) {
                $(".not-hidden").removeClass("not-hidden").addClass("hidden");
            }
        });
    });