Question

我正在研究jsfiddle，但javascript文件似乎没有添加到我的html中。当屏幕达到一定宽度时，我正试图从我的页脚上的div中删除一个类。我正在使用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”类：

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()的返回值传递给load函数。

请尝试这种方式：

$(document).load(readaptClasses)

因此，您无需担心代码的位置，您应该使用$(document).ready(readaptClasses)而不是load。

注意：一个很好的快捷方式 DOM ready 处理程序就是这样：

$(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

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

您有3个选择：

把你的代码放在$(document).ready()里面 - 这个jQuery函数会做同样的事情-as @trueblueaussie建议
将代码放在body标记的末尾 - 它将在解析DOM后执行
将defer属性添加到您的脚本中 - 这将告诉浏览器在加载DOM后执行此脚本。

这种方法也会增加你的页面加载，因为客户端会首先看到一些HTML，这会让他开心，然后你的脚本将完成其余的工作：）

有用的链接：

Javascript不适用于jsfiddle

2 个答案:

更新