Question

我正在尝试使用一个简单的开关为移动设备创建预览，该开关动态加载并从标题中删除样式表：

$('.switch').on('click', function() {
    $('link[title="tablet"], link[title="phone"]').remove();
    var mode = $(this).data('mode');
    switch (mode) {
        case "screen":
            $("#main").css({width: '100%'});
            break;

        case "tablet":
            $("#main").css({width: '1024px'});
            $("head link[rel='stylesheet']").last().after('<link title="tablet" rel="stylesheet" href="tablet.css" type="text/css">');
            break;

        case "phone":
            $("#main").animate({width: '768px'})
            $("head link[rel='stylesheet']").last().after('<link title="phone" rel="stylesheet" href="phone.css" type="text/css">');
            break;
    }
});

这里是简化的html：

<a class="action" data-mode="screen">Large</a>
<a class="action" data-mode="tablet">Medium</a>
<a class="action" data-mode="phone">Small</a>

<div id="main"></div>

以上部分工作，所有样式表都根据需要从“标题”中添加/删除，但问题是两者的任意组合都可以正常工作。

例如默认视图是屏幕，所以如果我点击手机模式，那可以正常工作，但是如果从手机模式我点击平板电脑模式，它就不起作用。

无论第二次点击是什么，无论是手机还是手机，它都能正常工作，但结合使用这三种功能，我无法让它发挥作用。

如果有人问为什么不使用自适应媒体查询，我不想调整窗口大小，我的想法是让窗口保持不变，但在主容器宽度更改时应用不同的样式表。

jQuery根据元素宽度

0 个答案: