JQuery $（window）.resize（）函數不能正常工作

我是新來的，在這個問題上進行了一系列搜索之後，我到了這裏。我有一個jquery滑塊與下一個/ prev按鈕...一切工作正常摘錄我想顯示基於當前瀏覽器寬度的圖像數量，例如，如果瀏覽器寬度小於400只顯示1圖像等等。這對加載起作用，但是當我調整瀏覽器的大小時，它不能按預期工作。（我也是Jquery的新手......顯然）。請高度讚賞你的幫助。

這是HTML

<div class="trends"> 
    <div class="top-trends"> 
     <img src="/some-img.png"> 
    </div> 

    <div class="top-trends"> 
     <img src="/some-img.png"> 
    </div> 

    <div class="top-trends"> 
     <img src="/some-img.png"> 
    </div> 

    <div class="top-trends"> 
     <img src="/some-img.png"> 
    </div> 

    <div class="top-trends"> 
     <img src="/some-img.png"> 
    </div> 

    <div class="top-trends"> 
     <img src="/some-img.png"> 
    </div> 
</div>

而jQuery的

(function($){ 
    $(document).ready(function(){ 
     var windowsWidth = $(window).width(); 

     if (windowsWidth < 400) { 
      $('.trends').children('.top-trends:gt(0)').hide(); 

      var slideFoward = function() { 
       var next = $('.top-trends:visible').next(); 
       var first = $('.top-trends:visible').first(); 

       if ($('.top-trends:visible').length == 1 && $('.top-trends:visible ~ .top-trends:hidden').length == 0) { 
        $('.trends-next').addAttr('disabled', 'disabled'); 
       } 
       next.show(); 
       first.hide(); 
      } 
      var slideBackwards = function() { 
       var prev = $('.top-trends:visible').prev(); 
       var last = $('.top-trends:visible').last(); 
       var hf = $('.top-trends:visible').last().prevAll().length; 

       if (hf == 1 ) { 
        $('.trends-back').addAttr('disabled', 'disabled'); 
       } 
       prev.show(); 
       last.hide(); 
      } 
     } 

     else if (windowsWidth < 600) { 
      $('.trends').children('.top-trends:gt(1)').hide(); 

      var slideFoward = function() { 
       var next = $('.top-trends:visible').next(); 
       var first = $('.top-trends:visible').first(); 

       if ($('.top-trends:visible').length == 2 && $('.top-trends:visible ~ .top-trends:hidden').length == 0) { 
        $('.trends-next').addAttr('disabled', 'disabled'); 
       } 
       next.show(); 
       first.hide(); 
      } 
      var slideBackwards = function() { 
       var prev = $('.top-trends:visible').prev(); 
       var last = $('.top-trends:visible').last(); 
       var hf = $('.top-trends:visible').last().prevAll().length; 

       if (hf == 2 ) { 
        $('.trends-back').addAttr('disabled', 'disabled'); 
       } 
       prev.show(); 
       last.hide(); 
      } 
     } 

     else if (windowsWidth < 800) { 
      $('.trends').children('.top-trends:gt(2)').hide(); 

      var slideFoward = function() { 
       var next = $('.top-trends:visible').next(); 
       var first = $('.top-trends:visible').first(); 

       if ($('.top-trends:visible').length == 3 && $('.top-trends:visible ~ .top-trends:hidden').length == 0) { 
        $('.trends-next').addAttr('disabled', 'disabled'); 
       } 
       next.show(); 
       first.hide(); 
      } 
      var slideBackwards = function() { 
       var prev = $('.top-trends:visible').prev(); 
       var last = $('.top-trends:visible').last(); 
       var hf = $('.top-trends:visible').last().prevAll().length; 

      if (hf == 3 ) { 
       $('.trends-back').addAttr('disabled', 'disabled'); 
      } 
      prev.show(); 
      last.hide(); 
     } 
    } 

    else { 
     $('.trends').children('.top-trends:gt(3)').hide(); 

     var slideFoward = function() { 
      var next = $('.top-trends:visible').next(); 
      var first = $('.top-trends:visible').first(); 

      if ($('.top-trends:visible').length == 4 && $('.top-trends:visible ~ .top-trends:hidden').length == 0) { 
       $('.trends-next').addAttr('disabled', 'disabled'); 
      } 
      next.show(); 
      first.hide(); 
     } 
     var slideBackwards = function() { 
      var prev = $('.top-trends:visible').prev(); 
      var last = $('.top-trends:visible').last(); 
      var hf = $('.top-trends:visible').last().prevAll().length; 

      if (hf == 4 ) { 
       $('.trends-back').addAttr('disabled', 'disabled'); 
      } 
      prev.show(); 
      last.hide(); 
     } 
    } 
    $('.trends-next').click(slideFoward); 
    $('.trends-back').click(slideBackwards); 
}); 


$(window).resize(function(){ 
    var windowsWidth = $(window).width(); 

    if (windowsWidth < 400) { 
     $('.trends').children('.top-trends:gt(0)').hide(); 

     var slideFoward = function() { 
      var next = $('.top-trends:visible').next(); 
      var first = $('.top-trends:visible').first(); 

      if ($('.top-trends:visible').length == 1 && $('.top-trends:visible ~ .top-trends:hidden').length == 0) { 
       $('.trends-next').addAttr('disabled', 'disabled'); 
      } 
      next.show(); 
      first.hide(); 
     } 
     var slideBackwards = function() { 
      var prev = $('.top-trends:visible').prev(); 
      var last = $('.top-trends:visible').last(); 
      var hf = $('.top-trends:visible').last().prevAll().length; 

      if (hf == 1 ) { 
       $('.trends-back').addAttr('disabled', 'disabled'); 
      } 
      prev.show(); 
      last.hide(); 
     } 
    } 

    else if (windowsWidth < 600) { 
     $('.trends').children('.top-trends:gt(1)').hide(); 

     var slideFoward = function() { 
      var next = $('.top-trends:visible').next(); 
      var first = $('.top-trends:visible').first(); 

      if ($('.top-trends:visible').length == 2 && $('.top-trends:visible ~ .top-trends:hidden').length == 0) { 
       $('.trends-next').addAttr('disabled', 'disabled'); 
      } 
      next.show(); 
      first.hide(); 
     } 
     var slideBackwards = function() { 
      var prev = $('.top-trends:visible').prev(); 
      var last = $('.top-trends:visible').last(); 
      var hf = $('.top-trends:visible').last().prevAll().length; 

      if (hf == 2 ) { 
       $('.trends-back').addAttr('disabled', 'disabled'); 
      } 
      prev.show(); 
      last.hide(); 
     } 
    } 

    else if (windowsWidth < 800) { 
     $('.trends').children('.top-trends:gt(2)').hide(); 

     var slideFoward = function() { 
      var next = $('.top-trends:visible').next(); 
      var first = $('.top-trends:visible').first(); 

      if ($('.top-trends:visible').length == 3 && $('.top-trends:visible ~ .top-trends:hidden').length == 0) { 
       $('.trends-next').addAttr('disabled', 'disabled'); 
      } 
      next.show(); 
      first.hide(); 
     } 
     var slideBackwards = function() { 
      var prev = $('.top-trends:visible').prev(); 
      var last = $('.top-trends:visible').last(); 
      var hf = $('.top-trends:visible').last().prevAll().length; 

      if (hf == 3 ) { 
       $('.trends-back').addAttr('disabled', 'disabled'); 
      } 
      prev.show(); 
      last.hide(); 
     } 
    } 

    else { 
     $('.trends').children('.top-trends:gt(3)').hide(); 

     var slideFoward = function() { 
      var next = $('.top-trends:visible').next(); 
      var first = $('.top-trends:visible').first(); 

      if ($('.top-trends:visible').length == 4 && $('.top-trends:visible ~ .top-trends:hidden').length == 0) { 
       $('.trends-next').addAttr('disabled', 'disabled'); 
      } 
      next.show(); 
      first.hide(); 
     } 
     var slideBackwards = function() { 
      var prev = $('.top-trends:visible').prev(); 
      var last = $('.top-trends:visible').last(); 
      var hf = $('.top-trends:visible').last().prevAll().length; 

      if (hf == 4 ) { 
       $('.trends-back').addAttr('disabled', 'disabled'); 
      } 
      prev.show(); 
      last.hide(); 
     } 
    } 
    $('.trends-next').click(slideFoward); 
    $('.trends-back').click(slideBackwards); 
}); 
})(jQuery);

來源

2014-10-09 Deon Dazy

「不按預期工作」是不夠的信息。你如何期待它的工作，你觀察你當前的代碼的行爲是什麼？記住，我們不知道你想要什麼，你也沒有給我們任何我們可以運行和看的東西，所以我們必須繼續下去的是你的話和我們可以從你的代碼中看出的任何意圖。請更準確地描述你想要的內容，以及你目前的代碼所做的與現在不同的內容。 – jfriend00 2014-10-09 20:31:31

P.S.您應該能夠將啓動時使用的完全相同的代碼和調整大小的代碼分解爲一個通用函數，而不是複製大量代碼。 – jfriend00 2014-10-09 20:33:20

好了，所以我想我明白你的意思。這些元素在縮小窗口大小時會隱藏起來，但在增加窗口大小時不會顯示，對嗎？

如果我遇到了問題，這是一個簡單的修復。你只是想顯示在每一個窗口大小調整的所有圖像，然後進行元素隱藏其中的決定：

$(window).resize(function() { $('.trends').children('.top-trends').show(); if (windowsWidth < 400) { ...

看到了整個事情here（我得到了清晰擺脫所有slideFoward/slideFoward功能 - 下次你可能要刪除所有不必要的代碼，它會使問題變得簡單得多）。

來源

2014-10-09 21:14:22 wap300

優秀！這正是我想要的。大聲笑我花了所有的時間搜索，這只是一線修復:)感謝很多@ wap300你只是讓我的一天！ – 2014-10-09 21:55:36

當然，高興地幫助:) – wap300 2014-10-09 21:56:18

JQuery $（window）.resize（）函數不能正常工作

回答

相關問題