if条件阻塞jquery函数

时间:2011-03-29 13:10:10

标签: javascript jquery html

有3张幻灯片(page1.htmlpage2.htmlpage3.html)和2个ID为prevslidenextslide的按钮。目标是在用户单击其中一个按钮时显示下一张或上一张幻灯片。主要问题是将slideisnow变量的值与下一个或上一张幻灯片完全相同。 (例如,如果现在是幻灯片page1.html,则下一张幻灯片必须为page2.html,之前为page3.html) 这是代码(它不起作用):

<script type="text/javascript">  
    $(document).ready(function(){  
        $('#prevslide').click(function(){  

//var slideisnow = 0;
if (slideisnow<0)
{
    var slideisnow = 3;
}
elseif(slidesnow>=3)
{
    var slideisnow = 3;
}

        slideisnow = slideisnow - 1;
            $.ajax({  
                url: "page" + slideisnow + ".html",  
                cache: false,  
                success: function(html){  
                    $("#content").html(html);  
                }  
            });  
        });  

        $('#nextslide').click(function(){  

//var slideisnow = 0;
if (slideisnow>3)
{
    var slideisnow = 1;
}
elseif(slidesnow<=3)
{
    var slideisnow = 0;
}

        slideisnow = slideisnow + 1;
            $.ajax({  
                url: "page" + slideisnow + ".html",  
                cache: false,  
                success: function(html){  
                    $("#content").html(html);  
                }  
            });  
        });  

    });  
</script>  

6 个答案:

答案 0 :(得分:0)

答案 1 :(得分:0)

  1. 你为什么要使用$ .ajax?你不应该只使用window.location吗? (或一些幻灯片插件)
  2. 为什么不使用像“currentSlide = ++ currentSlide%3;”这样简单的代码?

答案 2 :(得分:0)

这两行有可能导致问题:

elseif(slidesnow>=3) 

elseif无效的JavaScript;它应该是else ifslidesnow应为slideisnow(您错过了“我”)。

else if(slideisnow>=3)

答案 3 :(得分:0)

请参阅穆罕默德对第三方解决方案的回答。对于你的jQuery,你不想做更像的事情:

// Next
slideisnow = (slideisnow+1) % 3;
...
// Prev
slideisnow = (slideisnow-1) % 3;

答案 4 :(得分:0)

这可能呢?请注意单行和我尝试提供隐藏计数器的单身

<script type="text/javascript">  
$(document).ready(function(){  
  $('#prevslide').click(function(){   
    getSlide(slideCounter.addCounter(-1));
  });  
  $('#nextslide').click(function(){    
    getSlide(slideCounter.addCounter(+1));
  };
});
function getSlide(slideisnow) {
  $.ajax({
    url: "page" + slideisnow + ".html",  
    cache: false,  
    success: function(html){  
      $("#content").html(html);  
    }  
  });
}
var  slideCounter = (function () {
  var currentCounter = 0;
  var maxCounter = slides.length-1; // you need to change this
  return {
    getCounter: function () {return currentCounter;},
    addCounter: function (direction) {
      currentCounter+=direction;
      if (currentCounter<0) currentCounter=maxCounter; 
      else if (currentCounter>maxCounter) currentCounter=0; 
      return currentCounter; 
    }
  };
}());

</script>  

答案 5 :(得分:0)

可能这个解决方案可以帮到你:

此脚本使用jQuery操作#content DIV的关联数据属性。

 $(document).ready(function() {
     $('#prevslide').click(function() {
         var slideisnow = $("#content").data('slideisnow');
         if(slideisnow === undefined) {
             slideisnow = 3; //By default we show page3.html
         }
         // If page is first, then
         else if (slideisnow <= 1) { 
             slideisnow = 3; // return to last page
         }
         else if(slideisnow > 3) {
             slideisnow = 2;
         }
         // Normal pages just decrement its number
         else {
             slideisnow = slideisnow - 1;
         }
         $("#content").data('slideisnow', slideisnow);
         $.ajax({
             url: "page" + slideisnow + ".html",
             cache: false,
             success: function(html) {
                 $("#content").html(html);
             }
         });
     });

     $('#nextslide').click(function() {
         var slideisnow = $("#content").data('slideisnow');
         if(slideisnow === undefined) {
             slideisnow = 1; //By default we show page1.html
         }
         else if (slideisnow >= 3) {
             slideisnow = 1;
         }
         else if(slideisnow < 1) {
             slideisnow = 2;
         }
         else {
             slideisnow = slideisnow + 1;
         }

         $("#content").data('slideisnow', slideisnow);
         $.ajax({
             url: "page" + slideisnow + ".html",
             cache: false,
             success: function(html) {
                 $("#content").html(html);
             }
         });
     });

 });