Question

我有自举旋转木马和img的旋转木马有data-mobil和data-table属性，当我调整平板电脑的窗口大小时，我的img src值一直在用data-table src进行调整或者当我调整移动窗口的大小时，我的img src到目前为止一直在调整宽度data-mobil src..it＆＃39; s okey ..但是如果data-mobil或data-tablet同一时间未定义我的意思是空是比显示：none;但我的展示没有占用空间为什么？

click to see live example - 调整平板电脑版本的大小窗口

＆＃13;

function makeResize() {
  var imageSrc = $(".main-carousel img");
  if ($(window).width() <= 768 && $(window).width() > 480) {
    $(imageSrc).each(function(key, value) {
      if ($(value).data('tablet') == undefined)
        $(value).parent(".item").hide();
      
      else {
        $(value).attr('src', $(value).data('tablet'));
        $(value).parent(".item").show();
      }
    });
  } else if ($(window).width() <= 480) {
    $(imageSrc).each(function(key, value) {
      if ($(value).data('mobil') == undefined) {
        $(value).parent(".item").hide();
      } else {
        $(value).attr('src', $(value).data('mobil'));
        $(value).parent(".item").show();
      }
    });
  } else {
    $(imageSrc).each(function(key, value) {
      $(value).attr('src', $(value).data('src'));
      $(value).show();
    });
  }
}

$(document).ready(function(){
  
   $(window).resize(function(){
        makeResize();
    });
    makeResize();
});

＆＃13;

.main-carousel{
  width:1000px;
}
.main-carousel img{
  width:100%;
}

＆＃13;

<html lang="en">
<head>
  <meta charset="UTF-8" /><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

</head>
<body>
  
   <div id="homepage-carousel" class="carousel carousel-fade slide main-carousel" data-ride="carousel">
     
        <ol class="carousel-indicators">
    <li data-target="#homepage-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#homepage-carousel" data-slide-to="1"></li>
    <li data-target="#homepage-carousel" data-slide-to="2"></li>
  </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
            

              <div class="item active">
                <img src="http://cdn.anitur.com.tr/resimler/normal/2017-02/banner_Hn3kjP6eM7ltkZzATMMkanitur-enguzel-anilar-manset-banner-2017-6subat.jpg"  data-mobil="http://www.anitur.com.tr/blog/wp-content/uploads/2016/06/Karadeniz24-372x221.jpg">
              </div>

              <div class="item">
                <img src="http://cdn.anitur.com.tr/resimler/normal/2016-12/banner_r7SIBGm1BaKCNMsZojfNtermal-bolgeler.jpg"  data-tablet="http://www.anitur.com.tr/blog/wp-content/uploads/2016/03/Silversea-cruise-1024x657.jpg" data-mobil="http://www.anitur.com.tr/blog/wp-content/uploads/2016/06/Karadeniz24-372x221.jpg">
              </div>
              <div class="item">
                <img src="http://cdn.anitur.com.tr/resimler/normal/2017-01/banner_PYo0aKYQiz6VN3XF1rTGunknown-2.jpeg"  data-tablet="http://www.anitur.com.tr/blog/wp-content/uploads/2016/03/Silversea-cruise-1024x657.jpg" data-mobil="http://www.anitur.com.tr/blog/wp-content/uploads/2016/06/Karadeniz24-372x221.jpg">
              </div>


            </div>
        </div>
  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

Answer 1

您正在隐藏该项目，但就滑块而言，它仍然存在，这就是您为什么会看到空白点的原因。您需要.remove()或者如果您需要稍后将其恢复使用.detach()

https://api.jquery.com/detach/

if ($(value).data('tablet') == undefined) {
  var hidden = $(value).parent(".item").detach()
}

然后在你希望它带回来的代码块中

if (hidden) {
  hidden.appendTo('target you want it added to')
}

Answer 2

尝试使用以下代码。我已在本地设置中测试过它。

希望这有帮助。

  function makeResize() {
  var imageSrc = $(".main-carousel img");
  if ($(window).width() <= 768 && $(window).width() > 480) {
    $(imageSrc).each(function(key, value) {
      if ($(value).data('tablet') == undefined)

         if($(value).parent("div").hasClass("active"))
         {
          $(value).parent("div").removeClass("item active").css('display','none');
          $(value).parent("div").next("div").addClass("active");
         }
         else
         {
          $(value).parent("div").removeClass("item active").css('display','none');
         }

      else {
        $(value).attr('src', $(value).data('tablet'));
        $(value).parent("div").addClass("item").css('display','');
      }
    });
  } else if ($(window).width() <= 480) {
    $(imageSrc).each(function(key, value) {
      if ($(value).data('mobil') == undefined) {

         if($(value).parent("div").hasClass("active"))
         {
          $(value).parent("div").removeClass("item active").css('display','none');
          $(value).parent("div").next("div").addClass("active");
         }
         else
         {
          $(value).parent("div").removeClass("item active").css('display','none');
         }
      } else {
        $(value).attr('src', $(value).data('mobil'));
        $(value).parent("div").addClass("item").css('display','');
      }
    });
  } else {
    $(imageSrc).each(function(key, value) {
      $(value).attr('src', $(value).data('src'));
       $(value).parent("div").addClass("item").css('display','');
      $(value).show();
    });
  }
}

bootstrap carousel image，显示无div占用空间

2 个答案: