Добавить/Удалить CSS id на основе ширины экрана

Question

Вы пытались получить $("#id1").add(); и $("#id2").remove(); для работы внутри следующей функции, взятой из this. Я получаю $("#id2").remove(); для работы с консолью, и я хотел бы заставить их обоих работать изнутри этой функции.

(function($) { 
    var $window = $(window), 

    function resize() { 
     if ($window.width() < 801) { 
       $("#id1").add();  
       $("#id2").remove();  
    } 
     else { 
       $("#id2").add();  
       $("#id1").remove(); 
     } 
    } 

    $window 
     .resize(resize) 
     .trigger('resize'); 
})(jQuery); 

С другой стороны, это может заставить его работать, используя .addClass/.removeClass, но тогда он должен предназначаться все суб-классы, а также ..

Answer 1

СМИ запросы могут быть использованы для переключения видимости элементов :

CSS

/* show id1, hide id2, when screen resolution is 800px or less */ 
@media screen and (max-width: 800px) { 
    #id1 { 
     display:block; /*or inline, or whatever */ 
    } 
    #id2 { 
     display:none; 
    } 
} 

/* show id2, hide id1, when screen resolution is greater than 800px */ 
@media screen and (min-width: 801px) { 
    #id1 { 
     display:none; 
    } 
    #id2 { 
     display:block; /*or inline, or whatever */ 

    } 
} 

Но если они нужно действовать ually быть добавлены и удалены из DOM, то как об этом

(function($) { 
    var $id1=$('#id1'); 
    var $id1Parent=$id1.parent(); 
    var $id2==$('#id2'); 
    var $id2Parent=$id2.parent(); 

    var $window = $(window), 

    function resize() { 
       $('#id1,#id2').remove(); 
     if ($window.width() < 801) { 
       $id1Parent.append($id1); 
    } 
     else { 
       $id2Parent.append($id2); 
     } 
    } 

    $window 
     .resize(resize) 
     .trigger('resize'); 
})(jQuery); 

Answer 2

дисплея ни есть путь для такого рода ситуаций.

Другой способ - использовать JQuery, но это будет довольно грязно, если ваш код будет длиннее. Или вы можете использовать AJAX для загрузки div-части, если коды div действительно длинны.

function resize() { 
    if ($window.width() < 801) { 
      $("<div id='1'></div>").appendTo('.container'); //add it to your container  
      $("#id2").remove();  
    } 
    else ...... 
}