Question

我有一个带有jquery的小型响应式横幅广告项目，我在平板电脑和移动设备上重新设置我的横幅，但是我的if条件无法正常工作。

在平板电脑上：tabletSlider（）;必须工作在移动设备上：mobileSlider（）;必须工作在web上：webSlider（）;必须再次工作但只有tabletSlider（）;如果你在平板电脑上检查出来，就会有效。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

Demo on Jsbin

Answer 1

尝试重写if语句，如下所示：

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

这样可以防止平板电脑滑块显示在手机上，如果宽度不低于平板电脑或手机，则会显示网页滑块

Answer 2

将您的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并观看控制台日志。它会根据您指定的宽度触发您的功能。

为什么我的window.width方法无法正常工作？

2 个答案: