Question

我在调整大小窗口中使用add为remove jQuery类提供了这个jQuery代码：

JS：

$(function () {

    $(window).bind("resize", function () {
        console.log($(this).width())
        if ($(this).width() < 500) {
            $('div').removeClass('yellow').addClass('red')
        } else {
            $('div').removeClass('red').addClass('yellow')
        }
    })
})

HTML：

<div style="width:300px; height:100px;" class="yellow"></div>

在行动中，这只适用于我手动调整窗口大小但是默认情况下如果设备窗口＆lt; 500这个功能不起作用。

如何解决这个问题？！

演示HERE

Answer 1

使用trigger()在页面加载上运行功能

执行附加到给定事件类型的匹配元素的所有处理程序和行为。

@media (max-width: 500px) {
    div {
        color: red;
    }
}
@media (min-width: 500px) {
    div {
        color: yellow;
    }
}

Demo

您还可以使用CSS media查询在页面加载时设置元素的样式属性。与使用Javascript相比，这将获得很少的性能提升和更好的用户体验。

MERGE INTO TB_FWORKERSCH b 
USING TB_FWORKERCN a
   ON a.UKEY=b.UKEY2
   AND a.ISSDATE>='20150401' AND b.STAMP=0 AND b.IG_SUMINS<>0
WHEN MATCHED
   THEN UPDATE SET b.STAMP = b.STAMP + 10;

Answer 2

尝试在DOM准备就绪时调用$(function(){ $(window).bind("resize",function(){ if($(this).width() <500){ $('div').removeClass('yellow').addClass('red') } else{ $('div').removeClass('red').addClass('yellow') } }).resize(); });事件，

[AttributeUsage(AttributeTargets.Method, AllowMultiple = false)]
public class MenuItemAttribute : Attribute
{
}

DEMO

Answer 3

使用媒体查询

使用以下Css

.yellow{
background:yellow;
}

@media (max-width:500px) {
    .yellow {
    background:red;
    }
}

检查以下小提琴

http://jsfiddle.net/adxg3079/

让我知道它是否有用

使用jQuery在resize窗口中添加remove类

3 个答案:

DEMO