javascript - 根据屏幕宽度添加/删除 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 */

    }
}

但是如果它们需要实际添加到 DOM 中或从 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);