4

目前我在实现 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>
4

2 回答 2

3

您需要将 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);
 });
于 2013-08-27T10:48:48.403 回答
1

将您的 jquery 代码包装在

$(function(){
      /* your code here */
});

像这样：（我对你的代码做了一些小改动，使我的答案有点大）

$(function () {
    var body = $('body'),
        main = $('.main'),
        modals = $('.open-modal, .close-modal'),
        modal_container = $('.modal-container'),
        toggleModal = function () {
            body.toggleClass('body-locked');
            modal_container.toggleClass('dp-block');
        };

    modals.on('click', toggleModal);
});
于 2013-08-27T10:55:59.410 回答