根据视口宽度加载 jQuery

Question

我有一个活动日历，在顶行显示一周中的所有日子。日历本身是响应式的，但是当它针对移动设备缩小时，一周中的日子会延伸到它们的框之外，并且彼此重叠\xe2\x80\x93，这也会造成一些宽度溢出。

\n\n

我想使用 jQuery 将在移动设备上查看时的“Sunday”更改为“S”，但我不知道如何去做。

\n\n

使用“.replaceWith”命令，我已经设法让它的一部分工作。我只是不知道如何根据浏览器宽度触发这个脚本。

\n\n

这是到目前为止我的代码：

\n\n

$(window).resize(function() {\n    if ($(window).width() < 950) {\n        $( "div.sunday" ).replaceWith( "S" );\n        $( "div.monday" ).replaceWith( "M" );\n        $( "div.tuesday" ).replaceWith( "T" );\n        $( "div.wednesday" ).replaceWith( "W" );\n        $( "div.thursday" ).replaceWith( "T" );\n        $( "div.friday" ).replaceWith( "F" );\n        $( "div.saturday" ).replaceWith( "S" );\n    }\n}\n

\n\n

这是小提琴： http: //jsfiddle.net/CN8Gs/1/

\n

Answer 1

试试这个：

$(window).resize(function() {
console.log($(window).width());
if ($(window).width() < 950) {
    $( "div.sunday" ).text( "S" );
    $( "div.monday" ).text( "M" );
    $( "div.tuesday" ).text( "T" );
    $( "div.wednesday" ).text( "W" );
    $( "div.thursday" ).text( "T" );
    $( "div.friday" ).text( "F" );
    $( "div.saturday" ).text( "S" );
}
else
{
    $( "div.sunday" ).text( "Sunday" );
    $( "div.monday" ).text( "Monday" );
    $( "div.tuesday" ).text( "Tuesday" );
    $( "div.wednesday" ).text( "Wednesday" );
    $( "div.thursday" ).text( "Thursday" );
    $( "div.friday" ).text( "Friday" );
    $( "div.saturday" ).text( "Saturday" );
 }
});
$(window).trigger('resize');

JSFiddle demo