当屏幕宽度小于不工作的数量时更改文本

Question

当屏幕尺寸小于 650 时，我试图更改此网站上的文本，但它不起作用。 我已经尝试了Do something if screen width is less than 960 px和Resizing images when screen is less than 1024 pixel width的答案，但没有用。 这是replit的链接，代码片段也在下面。

if ($(window).width() < 650) { // I've also tried (window).width() and window.width
var words = $('.words');
words.text("Hello! This is the new text!");
}
else { 
}


<div class="intro">
  <div>
    <h1 class="ele">Hey there!</h1>
    <p class="ele words">Hi! This is the old text."</p>
  </div>
  <img class="ele me" src="me.png" alt="A picture of myself.">
</div>

Answer 1

我在 CodePen 上尝试了您的代码，它似乎工作正常，也许您的脚本加载到了错误的位置，或者您尝试更改的元素尚未创建，也许更多的代码可以帮助查看示例

<div class="intro">
  <div>
    <h1 class="ele">Hey there!</h1>
    <p class="ele words">Hi! This is the old text."</p>
  </div>
  <img class="ele me" src="me.png" alt="A picture of myself.">
</div>

$(window).resize(function() {
  if ($(window).width() < 650) {
    var words = $('.words');
    words.text("Hello! This is the new text!");
    }
    else { 
      var words = $('.words');
    words.text("Hello! This is the old text.");
  }
})