Question

我是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 *功能不起作用。

Answer 1

您的pag *函数返回是一个匿名函数，因此您必须先分配一个变量，然后执行该变量：

function pag1(){
   return function(){
       //code
   };
};

var fun = pag1();
fun();

所以，如果if语句变为：

$('#pi').click(function(){
        if($('.attivo').is('#p1')){
          alert("The statement is true");  //This is working
          var p3 = pag3();                          //this is not
          p3();
        };
        //etc
      });

也许重写所有pag *函数以直接执行：

function pag1(){
   $('#p1').addClass('attivo');
   $('#p2').removeClass('attivo');
   $('#p3').removeClass('attivo');
   $('#sob1').removeClass('hide');
   $('#sob2').addClass('hide');
   $('#sob3').addClass('hide');
};

Answer 2

您要在函数内部返回函数，因此请尝试调用page3（）（）;即var i = page3（）; i（）;

您正在dom上操作，因此不需要返回function。仅写逻辑，不返回任何函数值

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

2 个答案: