jQuery 显示评论框

标签 jquery html

我正在尝试学习一些 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

谢谢

最佳答案

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

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

如果事件需要绑定(bind)到多个元素,请使用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

关于jQuery 显示评论框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18168319/

相关文章:

jquery - 当我应用表单控件类时,日期选择器停止工作

jquery - 是否可以在没有媒体查询、视口(viewport)和其他脚本的情况下使网站适合 iPad/iPhone?

Jquery UI - 可在 Div 之间而不是在 Div 内排序

javascript - Jquery嵌套div数据表点击事件

javascript - 如何判断 mouseup 之后是否会发生单击事件?

javascript - 使用图像作为框架来显示动画的最佳方式是什么?

javascript - 使用jquery点击图像按钮时控制音频播放器

javascript - 以滚动条显示页面居中的 DIV 内容

javascript - 无法移动我的范围选择器

jquery - ASP.Net MVC JQuery 在 IE8 中未定义,但在 Chrome 中可以