目前我在实现 Javascript 时遇到了一个问题。这是链接
http://jsfiddle.net/joplomacedo/WzA4y/
这是有效的，我正在使用 Microsoft Visual Studio 2010，我有一些小文件，一个是 html，另一个是 CSS，我使用如下代码中的 Javscript，但这不像上面链接中的 jsFiddle 那样工作。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/jscript" language="javascript">
var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal'),
close_modal = $('.close-modal'),
modal_container = $('.modal-container'),
toggleModal = function() {
body.toggleClass('body-locked');
modal_container.toggleClass('dp-block');
};
open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);
</script>
</head>
<body>
<button class="open-modal">Button!</button>
<div class="modal-container dp-none">
<div class="modal">
<button class="close-modal">Close!</button>
</div>
</div>
</body>
</html>
最佳答案
您需要将您的 javascript/jquery 代码包装到 $(document).ready(function(){});因为否则您将尝试在 DOM 元素加载之前访问它们。
如果您注意到您提供的 jsFiddle 链接，您正在使用 jQuery 1.7.2 并加载代码“onload”，所以 jsFiddle 正在为您做这件事。
$(document).ready(function(){
var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal'),
close_modal = $('.close-modal'),
modal_container = $('.modal-container'),
toggleModal = function() {
body.toggleClass('body-locked');
modal_container.toggleClass('dp-block');
};
open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);
});
关于javascript - 如何使用这个 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18463271/