當屏幕寬度小於不工作的數量時更改文本

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.");
  }
})