如何使用jquery再次删除和重新创建元素？

时间：2017-08-08 13:17:02

标签： javascript jquery css twitter-bootstrap

我有自举旋转木马，我对我的横幅（网络，平板电脑和移动设备）有3个结果，这就是为什么我在网络，平板电脑和手机上展示不同的旋转木马。到目前为止它还有一些我无法实现的东西。

我想在平板电脑上删除我的.web-banner课程，我想再次在网络上重新创建，我想删除我在移动设备上的.tablet-banner，我想在平板电脑上重新创建。

这是我的项目演示，但我无法分享stackoverflow，因为它在stackoverflow上无法正常工作，这就是我在codepen click to see my demo

上传的原因

编辑代码段

＆＃13;
＆＃13; 
// Web banner
function webSlider() {

  var sources = $('#mycarousel .item img').map(function() {
    return $(this).attr('src');
  });

  $.each(sources, function(index, value) {

    $(".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) {

    $(".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) {

    $(".mobile-banner").append("<div class='item'><img src='" + value + "'></div>");
    $('.mobile-banner').find('.item:first-child').addClass('active');
  })

};




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

}
$(window).on('resize', sliderControl)
$(document).ready(function() {
  webSlider();
  tabletSlider();
  mobileSlider();
  $(".main-role-banner").remove();
});
＆＃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; 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<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 main-role-banner" role="listbox">
      <div class="item active">
        <img 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-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-tablet-src="https://unsplash.it/1000/300?image=84">
      </div>
    </div>

    <div class="carousel-inner web-banner" role="listbox"></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://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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

我认为这就是你要找的.empty()。 它会删除元素中的所有内容。

因此，您需要在函数中添加这些内容以删除div 

// Web banner
function webSlider() {

  var sources = $('#mycarousel .item img').map(function() {
    return $(this).attr('src');
  });

  $.each(sources, function(index, value) {

    $(".web-banner").append("<div class='item'><img src='" + value + "'></div>");
    $('.web-banner').find('.item:first-child').addClass('active');
  })

$('.tablet-banner').empty();
$('.mobile-banner').empty();


}


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

  $.each(sources, function(index, value) {

    $(".tablet-banner").append("<div class='item'><img src='" + value + "'></div>");
    $('.tablet-banner').find('.item:first-child').addClass('active');
  })
$('.web-banner').empty();
$('.mobile-banner').empty();
};

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

  $.each(sources, function(index, value) {

    $(".mobile-banner").append("<div class='item'><img src='" + value + "'></div>");
    $('.mobile-banner').find('.item:first-child').addClass('active');
  })
$('.web-banner').empty();
$('.tablet-banner').empty();
};




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

}
$(window).on('resize', sliderControl)
$(document).ready(function() {
  webSlider();
  tabletSlider();
  mobileSlider();
  $(".main-role-banner").remove();
});
#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;
}
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<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 main-role-banner" role="listbox">
      <div class="item active">
        <img 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-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-tablet-src="https://unsplash.it/1000/300?image=84">
      </div>
    </div>

    <div class="carousel-inner web-banner" role="listbox"></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://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>

答案 1 :(得分：0)

您可以使用媒体查询，也可以使用平板电脑：
PS：这个问题对媒体查询有帮助：Media Queries: How to target desktop, tablet and mobile? 

.web-banner, .tablet-banner, .mobile-banner {
    display : block; /* inline-block, inline or whatever your display is*/
}
@media YOUR-MEDIA-QUERY-FOR-MOBILE {
    .web-banner {display : hidden;}
    .tablet-banner {display : hidden;}
}
@media YOUR-MEDIA-QUERY-FOR-TABLET {
    .mobile-banner {display : hidden;}
    .web-banner {display : hidden;}
}
@media YOUR-MEDIA-QUERY-FOR-WEB {
    .mobile-banner {display : hidden;}
    .tablet-banner {display : hidden;}
}
相关问题
最新问题