javascript - 自定义函数未在“if”语句中运行

问题描述

我是 Javascript/jQuery 以及 Stack Overflow 的新手，所以如果我犯了一些大错，请不要生我的气。我正在使用 Bootstrap 3.3.7 处理 HTML 页面，并且我有一个分页按钮组，它通过添加或删除“隐藏”类来切换某些元素的可见性。我在js中制作了一些自定义函数来做到这一点，问题是这些函数在通过单击按钮调用它们时可以正常工作，但是当我尝试将它们放在“if”语句中时它们就不行了。我已经尝试在语句中添加一个简单的“警报”，以查看它是否正常工作，但功能没有运行。

有人可以向我解释我错过了什么吗？下面是我的代码：

HTML

<!--pagination-->
  <div id="pag-gal">
    <div class="btn-group" role="group" aria-label="btngrp">
      <button type="button" class="btn btn-default" id="pi">
          <span class="glyphicon glyphicon-chevron-left"></span>
      </button>
      <button type="button" class="btn btn-default attivo" id="p1">1</button>
      <button type="button" class="btn btn-default" id="p2">2</button>
      <button type="button" class="btn btn-default" id="p3">3</button>
      <button type="button" class="btn btn-default" id="pa">
          <span class="glyphicon glyphicon-chevron-right"></span>
      </button>
    </div>
  </div>

  <!--switching divs-->
  <div id="sob1" class="sob"></div>
  <div id="sob2" class="sob hide"></div>
  <div id="sob3" class="sob hide"></div>
</div>

JavaScript/jQuery

   <script type="text/javascript">
  $(document).ready(function(){
    function pag1(){
      return function(){
        $('#p1').addClass('attivo');
        $('#p2').removeClass('attivo');
        $('#p3').removeClass('attivo');
        $('#sob1').removeClass('hide');
        $('#sob2').addClass('hide');
        $('#sob3').addClass('hide');
      };
    };
    function pag2(){
      return function(){
        $('#p2').addClass('attivo');
        $('#p1').removeClass('attivo');
        $('#p3').removeClass('attivo');
        $('#sob2').removeClass('hide');
        $('#sob1').addClass('hide');
        $('#sob3').addClass('hide');
      };
    };
    function pag3(){
      return function(){
        $('#p3').addClass('attivo');
        $('#p1').removeClass('attivo');
        $('#p2').removeClass('attivo');
        $('#sob3').removeClass('hide');
        $('#sob2').addClass('hide');
        $('#sob1').addClass('hide');
      };
    };
    $('#p1').click(pag1());
    $('#p2').click(pag2());
    $('#p3').click(pag3());
    $('#pi').click(function(){
        if($('.attivo').is('#p1')){
          alert("The statement is true");  //This is working
          pag3();                          //this is not
        };
        if($('.attivo').is('#p2')){
          pag1();                          //nor this
        };
        if($('.attivo').is('#p3')){
          pag2();                          //or this
        };
      });
      $('#pa').click(function(){
          if($('.attivo').is('#p1')){
            pag2();
          };
          if($('.attivo').is('#p2')){
            pag3();
          };
          if($('.attivo').is('#p3')){
            pag1();
          };
        });
    });
  </script>

当我单击#p* 按钮时，当我单击#pi 或#pa 时，pag* 功能正在工作，但它们却不是。

标签： javascriptjquery

javascript - 自定义函数未在“if”语句中运行

问题描述

解决方案

推荐阅读