Question

出于某种原因，当我尝试运行一个简单的jQuery代码时，它将无法正常工作。我相信代码是正确的，就像我的文件没有正确链接。它也不适用于具有不同代码的其他页面，因此我认为它必须与jQuery链接的方式相关。我的代码是：

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.7.2.min"></script>
<script type="text/javascript">
$('#toggle_message').click(function() {
    var value = $('#toggle_message').attr('value');
    $('#message').toggle('fast');

    if (value == 'Hide') {
        $('#toggle_message').attr('value', 'Show');
    } else if (value == 'Show') {
        $('#toggle_message').attr('value', 'Hide');
        }
    }
});
$('#toggle_message').click();
</script>
</head>
<body>
<input type="button" value="Hide" id="toggle_message" />
<p id="message">This is a paragraph that will disappear</p>
</body>
</html>

感谢任何帮助。另外，我的jQuery文件只有4行。这是正常的吗？

Answer 1

我怀疑你忘记了jQuery文件名中的.js。它应该是：

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

此外，是的，文件只有很少的行是正常的。它被压缩，每条线都很长。

此外，as Nudier mentioned in the comments，绑定到元素在页面加载之前不起作用。您可能希望在页面加载之前延迟绑定：

$(function() {
    $('#toggle_message').click(function() {
        // ...
    });
    $('#toggle_message').click();
});

Answer 2

尝试将您的JQUERY代码包装在.ready函数中。而且，如上所述，链接的js可能是不正确的。如果需要，请随意尝试以下操作并将Jquery源更改为本地副本。通常我只使用来自http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

的src

 <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>
    <head>
    <title></title>
    <script src="" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#toggle_message').click(function() {
            var value = $('#toggle_message').attr('value');
            $('#message').toggle('fast');

            if (value == 'Hide') {
                $('#toggle_message').attr('value', 'Show');
            } else if (value == 'Show') {
                $('#toggle_message').attr('value', 'Hide');
                }
        });

        $('#toggle_message').click();
    });


    </script>
    </head>
    <body>
    <input type="button" value="Hide" id="toggle_message" />
    <p id="message">This is a paragraph that will disappear</p>
    </body>
    </html>
     $('#toggle_message').click();
    });

jQuery无法正常工作

2 个答案: