基于视口宽度加载jQuery

我有一个活动日历，上面一行显示了一周中的所有日子。日历本身是响应性的，但当它缩小到手机时，一周中的几天会延伸到它们的盒子之外，并相互重叠——这也会造成一些宽度溢出

我想使用jQuery在手机上查看时将“Sunday”改为“S”，但我不知道该怎么做

使用“.replaceWith”命令，我成功地使它的一部分工作。我只是不知道如何根据浏览器宽度触发此脚本

以下是我目前的代码：

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

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<950）{
$（“div.sunday”）。替换为（“S”）；
$（“星期一分部”）。替换为（“M”）；
$（“周二分部”）。替换为（“T”）；
$（“周三分部”）。替换为（“W”）；
$（“第四节”）。替换为（“T”）；
美元（“星期五”）。替换为（“F”）；
$（“星期六分部”）。替换为（“S”）；
}
}

这是小提琴：

试试这个：

$(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');

$（窗口）。调整大小（函数（）{
log（$（window.width（））；
如果（$（窗口）.width（）<950）{
$（“div.sunday”）。文本（“S”）；
元（「星期一分区」）。文本（「M」）；
元（星期二）文本（T）；
$（“周三分部”）。正文（“W”）；
$（星期四）文本（T）；
$（“星期五”）文本（“F”）；
$（“div.saturday”）。文本（S）；
}
其他的
{
$（“div.sunday”）.text（“sunday”）；
$（“div.monday”）.text（“星期一”）；
$（星期二）文本（星期二）；
$（星期三）文本（星期三）；
$（星期四）文本（星期四）；
美元（“星期五”）。文本（“星期五”）；
$（“div.saturday”）.text（“星期六”）；
}
});
$（window.trigger（'resize'）；

试试这个：

$(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');

$（窗口）。调整大小（函数（）{
log（$（window.width（））；
如果（$（窗口）.width（）<950）{
$（“div.sunday”）。文本（“S”）；
元（「星期一分区」）。文本（「M」）；
元（星期二）文本（T）；
$（“周三分部”）。正文（“W”）；
$（星期四）文本（T）；
$（“星期五”）文本（“F”）；
$（“div.saturday”）。文本（S）；
}
其他的
{
$（“div.sunday”）.text（“sunday”）；
$（“div.monday”）.text（“星期一”）；
$（星期二）文本（星期二）；
$（星期三）文本（星期三）；
$（星期四）文本（星期四）；
美元（“星期五”）。文本（“星期五”）；
$（“div.saturday”）.text（“星期六”）；
}
});
$（window.trigger（'resize'）；

这两种方法都可以：（运行并调整结果窗口的大小。950实际上相当宽。您可能需要减小宽度以进行更真实的测试。）

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<950）{
$（“div.sunday”）.html（“S”）；
$（“div.monday”）.html（“M”）；
$（“div.teday”）.html（“T”）；
$（“div.周三”）.html（“W”）；
$（“div.周四”）.html（“T”）；
$（“div.fride”）.html（“F”）；
$（“div.saturday”）.html（“S”）；
}否则{
$（“div.sunday”）.html（“sunday”）；
$（“div.monday”）.html（“星期一”）；
$（“div.sunday”）.html（“星期二”）；
$（“div.周三”）.html（“周三”）；
$（星期四）html（星期四）；
$（“div.fride”）.html（“星期五”）；
$（“div.saturday”）.html（“saturday”）；
}
});

这两种方法都可以：（运行并调整结果窗口的大小。950实际上相当宽。您可能需要减小宽度以进行更真实的测试。）

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<950）{
$（“div.sunday”）.html（“S”）；
$（“div.monday”）.html（“M”）；
$（“div.teday”）.html（“T”）；
$（“div.周三”）.html（“W”）；
$（“div.周四”）.html（“T”）；
$（“div.fride”）.html（“F”）；
$（“div.saturday”）.html（“S”）；
}否则{
$（“div.sunday”）.html（“sunday”）；
$（“div.monday”）.html（“星期一”）；
$（“div.sunday”）.html（“星期二”）；
$（“div.周三”）.html（“周三”）；
$（星期四）html（星期四）；
$（“div.fride”）.html（“星期五”）；
$（“div.saturday”）.html（“saturday”）；
}
});

您确定不应该只使用

text（）

，而不使用

replaceWith（）

您没有触发resize…

$（窗口）。resize（处理程序）。resize（）

您也可以使用media query+html组合进行同样的操作。请注意，js中的宽度与media query中使用的宽度不同。您可能需要根据您处理内容的方式对其进行同步。您错过了关闭

）

要调整大小，您确定不应该只使用

text（）

，而不是

replaceWith（）

您没有触发调整大小<代码>$（窗口）.resize（处理程序）.resize（）您可以使用媒体查询+html组合执行相同的操作。请注意，js中的宽度与媒体查询中使用的宽度不同。您可能需要同步它们，具体取决于您处理内容的方式。您错过了调整大小的关闭按钮。），这似乎是可行的，但前提是您手动调整浏览器大小。我希望它能工作，如果你加载的网页，你已经看到了窗口小于950px的网页。-@EricWood所以在doc ready上做同样的事情，除了缺少调整大小的关闭

）

之外，您的代码很好。但是我不建议您使用replace，因为您可以对css媒体查询执行相同的操作，或者您可以在js中添加一个类，并使用该类隐藏单词和显示字母，这样更安全。如果你这样做，当你再次调整到更大的屏幕时，你必须进行另一轮的替换，这是不对的。它修复了OP试图执行的操作，但方法不正确。您正在用字符串文字替换div标记。想象一下，当页面更宽时，尝试返回。。。你不能。你的DOM被破坏了。@PaulSasik，你是