JQuery $ (window) .resize() 함수가 올바르게 작동하지 않습니다.

Question

저는 여기에 새로운데, 나는이 문제에 대한 일련의 조사를 통해 여기에 왔습니다. 다음/이전 단추가있는 jquery 슬라이더가 있습니다 ... 잘 발췌했습니다. 현재 브라우저 너비를 기준으로 여러 이미지를 표시하려고합니다. 예를 들어 브라우저 너비가 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> 

그리고

(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); 

Answer 1

좋아 JQuery와, 그래서 나는 당신이 무슨 뜻인지 알 것 같아요. 창 크기를 줄이면 요소가 숨겨 지지만 늘리면 표시되지 않습니다. 맞습니까?

문제가 잘 풀리면 해결됩니다.

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

이 here (나는 명확성을 위해 모든 slideFoward/slideFoward 기능을 제거있어 전체를 참조하십시오 : 당신은 그냥 요소를 숨길 수있는 결정을 한 후 모든 창 크기 조정에있는 모든 이미지를 표시하고 싶은 - 다음 번에는 불필요한 코드를 모두 제거해야 할 수도 있습니다. 문제가 훨씬 간단해질 것입니다.)