爲什麼我的window.width方法無法正常工作？

我有一個小型的響應橫幅項目與jQuery和我重新創建我的旗幟上響應平板電腦和手機，但我的條件是不正常工作。爲什麼我的window.width方法無法正常工作？

On tablet：tabletSlider（）;必須在手機上運行：mobileSlider（）;必須在網上工作：webSlider（）;必須重新工作，但只有tabletSlider（）;如果您在平板電腦上檢查它，它正在工作。

// Web banner 
 
function webSlider() { 
 
    var sources = $('#mycarousel .item img').map(function() { 
 
    return $(this).data('web-src'); 
 
    }); 
 

 
    $.each(sources, function(index, value) { 
 
    $(".tablet-banner,.mobile-banner").remove(); 
 
    $(".web-banner").append("<div class='item'><img src='" + value + "'></div>"); 
 
    $('.web-banner').find('.item:first-child').addClass('active'); 
 
    }) 
 

 
}; 
 

 

 
// Tablet banner 
 
function tabletSlider() { 
 
    var sources = $('#mycarousel .item img').map(function() { 
 
    return $(this).data('tablet-src'); 
 
    }); 
 

 
    $.each(sources, function(index, value) { 
 
    $(".web-banner").remove(); 
 
    $(".tablet-banner").append("<div class='item'><img src='" + value + "'></div>"); 
 
    $('.tablet-banner').find('.item:first-child').addClass('active'); 
 
    }) 
 

 
}; 
 

 
// Mobile banner 
 
function mobileSlider() { 
 
    var sources = $('#mycarousel .item img').map(function() { 
 
    return $(this).data('mobile-src'); 
 
    }); 
 

 
    $.each(sources, function(index, value) { 
 
    $(".tablet-banner,.web-banner").remove(); 
 
    $(".mobile-banner").append("<div class='item'><img src='" + value + "'></div>"); 
 
    $('.mobile-banner').find('.item:first-child').addClass('active'); 
 
    }) 
 

 
}; 
 

 

 
$(window).on('resize', sliderControl) 
 

 
function sliderControl() { 
 
    var vn = $(window).width(); 
 
    var large = 1024; 
 
    var tablet = 767; 
 
    var mobil = 480; 
 

 
    if (vn > large) { 
 
    webSlider(); 
 
    } else if (vn < tablet) { 
 
    tabletSlider(); 
 
    } else if (vn < mobil) { 
 
    mobileSlider(); 
 
    } 
 

 

 
} 
 

 
$(document).ready(function() { 
 
    sliderControl(); 
 
})

#mycarousel { 
 
    height: 400px; 
 
} 
 

 
.carousel-inner>.item>a>img, 
 
.carousel-inner>.item>img, 
 
.img-responsive, 
 
.thumbnail a>img, 
 
.thumbnail>img { 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 

 
.divs { 
 
    width: 300px; 
 
    margin: 20px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 

 

 
    <div class="container"> 
 
    <div id="mycarousel" class="carousel slide" data-ride="carousel"> 
 
     <!-- Indicators --> 
 
     <ol class="carousel-indicators"> 
 
     <li data-target="#mycarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#mycarousel" data-slide-to="1"></li> 
 
     <li data-target="#mycarousel" data-slide-to="2"></li> 
 
     <li data-target="#mycarousel" data-slide-to="3"></li> 
 
     <li data-target="#mycarousel" data-slide-to="4"></li> 
 
     </ol> 
 

 
     <!-- Wrapper for slides --> 
 
     <div class="carousel-inner web-banner" role="listbox"> 
 
     <div class="item active"> 
 
      <img src="https://unsplash.it/1000/300?image=68" data-web-src="https://unsplash.it/1000/300?image=68" data-tablet-src=" https://unsplash.it/1000/300?image=21" data-mobile-src="https://unsplash.it/500/600?image=1"> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="https://unsplash.it/1000/300?image=43" data-web-src="https://unsplash.it/1000/300?image=43" data-tablet-src="https://unsplash.it/1000/300?image=1001" data-mobile-src="https://unsplash.it/500/600?image=2"> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="https://unsplash.it/1000/300?image=67"> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="https://unsplash.it/1000/300?image=47" data-tablet-src="https://unsplash.it/1000/300?image=1005"> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="https://unsplash.it/1000/300?image=72" data-mobile-src="https://unsplash.it/500/600?image=3"> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="https://unsplash.it/1000/300?image=80" data-web-src="https://unsplash.it/1000/300?image=80" data-tablet-src="https://unsplash.it/1000/300?image=84"> 
 
     </div> 
 
     </div> 
 

 
     <div class="carousel-inner tablet-banner" role="listbox"> 
 

 
     </div> 
 
     <div class="carousel-inner mobile-banner" role="listbox"> 
 

 
     </div> 
 
     <!-- Controls --> 
 
     <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
     </a> 
 
     <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
     </a> 
 
    </div> 
 

 
    </div> 
 

 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 

 
</body> 
 

 
</html>

Demo on Jsbin

來源

2017-08-08 ani_css

爲什麼不使用['window.matchMedia（）']（https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia）呢？ –

即9 + 10不支持這就是爲什麼 –

它支持IE 10 –

嘗試重寫你的if語句，像這樣：

if (vn < mobil) { 
    mobileSlider(); 
} else if (vn < tablet) { 
    tabletSlider(); 
} else { 
    webSlider(); 
}

這將阻止平板電腦滑塊要顯示在流動，而如果寬度不是低於平板電腦或手機，它會顯示網頁滑塊

來源

2017-08-08 11:04:35 rblarsen

謝謝，但沒有任何變化..我添加演示 –

-1

更新您的if-else條件爲：

if (vn > large) { 
     webSlider(); 
    } else if (vn < tablet && vn > mobil) { 
    // Need to check that vn should be greater than mobile 
    // and should be less than tablet 
     tabletSlider(); 
    } else if (vn < mobil) { 
     mobileSlider(); 
    }

檢查這個JSFiddle，看控制檯日誌。它相應地按照您指定的寬度觸發您的功能。

來源

2017-08-08 11:23:50 vivekkupadhyay

沒有什麼變化。 –

您是否檢查了*小提琴*並且*沒有任何變化...... *您按照您的要求以所需的寬度打擊所需功能的意思。 – vivekkupadhyay

爲什麼我的window.width方法無法正常工作？

回答

相關問題