我正在研究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);
什么都没发生......
答案 0 :(得分:5)
通过添加括号()
,您将立即执行代码,然后将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);
};
答案 1 :(得分:0)
在DOM加载到浏览器后应该执行JavaScript。立即执行它可能会破坏它,因为你将缺少一些DOM元素。
您有3个选择:
$(document).ready()
里面 - 这个jQuery函数会做同样的事情-as @trueblueaussie建议defer
属性添加到您的脚本中 - 这将告诉浏览器在加载DOM后执行此脚本。这种方法也会增加你的页面加载,因为客户端会首先看到一些HTML,这会让他开心,然后你的脚本将完成其余的工作:)
有用的链接: