Question

'if'方案有效，但如果没有，则为else。我试图通过点击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");
});

请参阅此LINK

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

如果工作，但不是

3 个答案: