-1
我有bootstrap旋轉木馬，我有3個resulotion爲我的橫幅（網頁，平板電腦和mobil），這就是爲什麼我在網絡，平板電腦和手機上顯示不同的旋轉木馬。目前爲止，但有一些我無法實現的。如何使用jquery再次移除和重新創建元素？
我想在平板電腦上刪除我的.web-banner類，我想在網頁上再次重新創建結果，我想要移除我在mobil上的.tablet-banner，並且我想在平板電腦上再次重新創建。
這是我的項目的demo，但是因爲它不是在計算器這就是爲什麼我在codepen click to see my demo
編輯的代碼片段上傳正常工作，我不能在計算器共享
// 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();
});#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>
這聽起來像你應該研究使用媒體查詢，而不是重複的HTML結構N次的各項決議。還請注意，您需要將所有相關代碼*置於問題本身中。 –
你從我的問題沒有任何理解.. –
它的bootstrap旋轉木馬，我只能刪除.carousel內部類如果你看看你會看到 –