2017-06-01 84 views
-1

我的元素,我想刪除就響應這個元素,但我想在桌面上如何使用jquery刪除和重新創建元素?

我的意思是我想在if刪除該元素再次重現,我想在else

我的項目再次創建是類似的東西

$(window).resize(function(){ 
 
    var width = $(window).width(); 
 
    if(width <=768){ 
 
     $('.element').remove(); 
 
    }else{ 
 
    //create again 
 
    } 
 
}).resize();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="element"> 
 
<p>something here..</p> 
 
</div>

註腳:請我不想喜因爲它div顯示當我滾動,然後如果我在手機上滾動後隱藏它然後它會再次顯示..

+2

爲什麼不使用CSS媒體查詢 –

+0

腳註:請不要隱藏它,因爲它div顯示當我滾動然後如果我在手機上滾動後隱藏它然後它會再次顯示.. –

+1

你究竟是什麼當我滾動時,這個'div顯示出來了嗎? – vijayP

回答

1

爲什麼你不試試隱藏和顯示,因爲如果你刪除它,你將需要一些隱藏的元素克隆它或將其添加回來。我建議你使用隱藏/顯示

$(window).resize(function(){ 
    var width = $(window).width(); 
    if(width <=768){ 
     $('.element').hide(); 
    }else{ 
     $('.element').show(); 
    } 
}).resize(); 

或使用css media query

@media(screen and max-width: 768px) { 
.element { 
    display: none; 
    } 

} 

,或者如果你想使用刪除,然後做一個全局變量和assing .element它。

var obj = $(".element"); 
$(window).resize(function(){ 
    var width = $(window).width(); 
    if(width <=768){ 
     $('.element').remove(); 
    }else{ 
     $('body').append(obj); 
    } 
}).resize(); 
+0

腳註:請不要將它隱藏起來,因爲當我滾動時div顯示,然後如果我在移動屏幕上滾動後將其隱藏,那麼它將再次顯示。 –

+1

@ani_css在此問題中,您已將該評論無處不在,但它沒有任何意義 –

1

爲什麼要刪除並將其恢復爲類似響應式設計?您可以使用CSS媒體查詢來代替,這是更爲資源友好型和整體更好的辦法:

@media(screen and max-width: 768px) { 
    .element { 
     display: none; 
    } 
} 

如果你將不得不使用JS,你應該使用.hide().show(),基本上不相同除了通過JQuery的事情:

$(window).resize(function() { 
    var width = $(window).width(); 

    if(width <= 768) { 
     $('.element').hide(); 
    } 
    else { 
     $('.element').show(); 
    } 
}).resize(); 

如果我沒有得到你的觀點,你居然必須通過刪除和恢復做到這一點的JS方式,請讓我知道在評論,我會盡力幫助。

+0

腳註:請不要隱藏它,因爲它是div顯示當我滾動,然後如果我在手機上滾動後隱藏它,那麼它會再次顯示.. –

+2

我真的不明白你想暗示什麼,對不起。一旦分辨率達到包括768像素的最大分辨率,使用媒體查詢將完全隱藏任何與媒體查詢兼容的設備上的任何視圖中的元素。 –

+0

對不起,我的英語不好..所以這個元素是隱藏在桌面上的元素向上滾動,這就是如果我在手機上隱藏滾動後它將再次顯示 –

2

如果你真的想刪除元素,當你想重新插入它時,不要實際使用remove()。使用detach()https://api.jquery.com/detach/

以下是從Re-attaching jQuery detach();

var el = $('.element'); 
if(width <=768){ 
    el.detach(); 
}else{ 
    $(body).append(el); 
} 

示例拆卸確保元件保持與它相關供以後使用的jQuery數據。