Javascript 不在 jsfiddle 上工作

Question

我正在使用 jsfiddle，但 javascript 文件似乎没有添加到我的 html。当屏幕达到一定宽度时，我试图从页脚上的 div 中删除 class。我正在使用 bootstrap 并且我有以下页脚：

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body>
<footer>
<div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <h2><b>Heading1</b></h2>
        <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
        <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
        <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="text-right" id="footer-right">
          <h2><b>Heading2</b></h2>
          <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
          <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
          <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
        </div>
      </div>
    </div>
  </div>
</footer>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>

现在，我想在屏幕宽度为 500px 时删除 "text-right" class：

JAVASCRIPT

var readaptClasses = function(){
  var width = $(window).width();
  alert(width);
  if (width < 500){
    $("#footer-right").removeClass("text-right"):
  }
  else {
    $("#footer-right").addClass("text-right"):
  }
};

$(document).ready(readaptClasses);
$(window).on('resize', readaptClasses);

什么都没发生...

Answer 1

通过添加括号 ()，您将立即执行您的代码，然后将 readaptClasses() 的 return 值 传递给load 函数。

试试这个方法：

$(document).load(readaptClasses)

这样您就不必担心代码放在哪里，您应该使用 $(document).ready(readaptClasses) 而不是 load。

注意：一个不错的快捷方式 DOM 就绪 处理程序就是这样：

$(readaptClasses);

更新：

您的代码也有冒号而不是分号来终止几行。这只会在控制台中给出语法错误。固定版本在这里：

JSFiddle: http://jsfiddle.net/TrueBlueAussie/ebkecb3r/

请注意，您可以使用 toggleClass 和 boolean 第二个参数来简化您的代码，如下所示：

var readaptClasses = function(){
  var width = $(window).width();
  $("#footer-right").toggleClass("text-right", width >= 500);
};

JSFiddle: http://jsfiddle.net/TrueBlueAussie/ebkecb3r/2/

Answer 2

JavaScript 应在 DOM 加载到浏览器后执行。立即执行它可能会破坏它，因为您将缺少一些 DOM 元素。

您有 3 个选择：

将您的代码放入 $(document).ready() - 此 jQuery 函数将执行与 @trueblueaussie 所建议的相同的操作
将您的代码放在 body 标记的末尾-它将在 DOM 被解析后执行
将 defer 属性添加到您的脚本 - 这将告诉浏览器在加载 DOM 后执行此脚本。

这种方法也会增加你的页面加载，因为客户首先会看到一些 HTML，这会让他高兴，然后你的脚本会做剩下的:)

有用的链接：

https://developers.google.com/speed/pagespeed/service/DeferJavaScript
window.onload vs document.onload

Javascript 不在 jsfiddle 上工作

Javascript not working on jsfiddle

javascript

jquery

twitter-bootstrap-3

jsfiddle

更新：