Question

我正在尝试学习一些jQuery来添加到我正在创建的网站。当用户点击“添加评论”链接时，会出现一个文本区域和发布评论按钮，但我似乎无法让它工作..

<html>
<head>
    <script type="text/javascript" src="jquery-1.10.0.min.js"></script>
    <script type="text/javascript" language="javascript">
        $("#addcomment").click(function () {
            $("#postComment").show("slow");
        });
    </script>
    <title></title>
    <link rel="stylesheet" type="text/css" href="test.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <div id="addcomment">
    <a href='#' id="addcomment" class="addcomment">add comment</a>
    </div>
    <div id="postComment" class="postComment">
    <textarea name="comment" id="comment" class="comment"></textarea>
    <input type="submit" value="Post Comment"/>
    </div>
</body>

和CSS

#postComment{
display: none;

我已经在http://jsfiddle.net/2dA3p/2/上尝试了它没有问题，但是在使用netbeans时，我没有运气。我希望有一个简单的修复或者我正在做的事情。

PS这是我的第一篇文章，希望我能正确遵守规则：S

由于

Answer 1

您必须在元素已存在后注册您的处理程序，因此必须将其包装在DOM就绪处理程序中。在jQuery中，其语法是将代码包装在$(function() {});

中

此外，元素ID必须是唯一的，或者未定义处理程序实际绑定到哪一个（通常它是jQuery遇到的DOM树中的第一个）。

如果事件需要绑定到多个元素，请使用class属性而不是ID属性，然后使用类选择器。

$(function () {
    $("#addcomment").click(function () {
        $("#postComment").show("slow");
    });
});

可能的标记（减去多余的类，但如果需要，可以重新添加它们，没有坏处）：

<div id="container">
    <div id="mainContent">
        <div id="addcomment"> <a href='#'>add comment</a></div>
        <div id='postComment'>
            <textarea name='comment' id='comment'></textarea>
            <input type='submit' value='Post Comment' />
        </div>
    </div>
</div>

jsFiddle Demo

Answer 2

因此。你需要在你正在与之交互的元素之后放置你的javascript，或者将这些代码放在DOM中。

$(document).ready(function(){
    $("#addcomment").click(function () {
        $("#postComment").show("slow");
    });
});

jQuery显示评论框

2 个答案: