Javascript 更改<；h1>；如果屏幕缩小

我有一个代码试图改变一个h1的文本，如果屏幕缩小，这里是我的实际代码，但不起作用。有人能帮我纠正和理解它吗？谢谢

HTML

测试

JAVASCRIPT

if($(window).width() <= 500){
$('#text1').Text('testing');  
}else{
$('#text1').Text('buuu');
}

---

if（$（window）.width（）您必须捕获窗口的大小调整事件。使用
jquery
很容易做到这一点。
试试这个：

$(window).resize(function(){
    if ($(window).width() <= 500){
        $('#text1').Text('testing');  
    }
    else {
        $('#text1').Text('buuu');
    }
});

$（窗口）。调整大小（函数（）{
如果（$（window）.width（）您需要使用
窗口
调整大小事件。其他选项是使用CSS伪代码


@介质（最小宽度：500px）{
#文本1：之后{
内容：“富”；
}
}
@介质（最大宽度：499px）{
#文本1：之后{
内容：“酒吧”；
}
}
也许CSS可以帮助您：


使用
data-
属性验证HTML5和mediaqueries以显示其值。旧的文本缩进方法可在标记本身的屏幕文本保持时擦除

您可以在不使用
id
或
class
的情况下对整个站点使用它，但是
data-
属性需要在那里并填充，否则需要设置
class
，或者
id
一次性使用。
@media all和（最大宽度：500px）{
h1{
文本缩进：-9999px；
}
h1：之前{
内容：attr（数据文本）；
文本缩进：0；
浮动：左；
}
}
我的长文本就在这里
你好，谢谢：）！但我正在测试，没有工作：（可能是什么原因？@Eugenio您是否正确设置并建立了JQuery，以及（可能）将此函数包装在一个
文档就绪
函数中？@Eugenio，检查jsBIN是否正常工作。如果包含
jquery
库，只需检查
html
，我建议使用
和
class=“small”
并根据需要将它们设置为
display:inline
或
display:none
。这样，文本就应该在HTML中。不要太确定空标记是一个好主意，任何其他媒体都无法读取（我是盲人，请阅读文本…，搜索引擎…没有关键字！！）…内容重复：(
$(window).resize(function(){
    if ($(window).width() <= 500){
        $('#text1').Text('testing');  
    }
    else {
        $('#text1').Text('buuu');
    }
});