Javascript 不适用于 jsfiddle-6ren

Javascript 不适用于 jsfiddle

转载作者：行者123 更新时间：2023-11-30 08:37:56

我正在使用 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>

现在，我想在屏幕宽度为 500 像素时删除“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);

什么都没发生...

最佳答案

通过添加括号，() ，您将立即执行您的代码，然后传递 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/

关于Javascript 不适用于 jsfiddle，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29743299/

文章推荐： java - Drive.Files 中没有 create() 方法

文章推荐： java - 如果 JSlider 更改，则更新 JPanel 边框

文章推荐： Java 8 update 91插件连接获取所有类

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript 不适用于 jsfiddle

更新: