2017-06-01 96 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数据。