我的jquery代码出了什么问题？

Question

html结构：

<form method="post" id="comment-form" accept-charset="UTF-8">
<div class="form-item form-type-textfield form-item-name">
 <input type="text" id="edit-name" name="name" value="" size="30" maxlength="60" class="form-text required" />
</div>
<div class="form-item form-type-textfield form-item-mail">

 <input type="text" id="edit-mail" name="mail" value="" size="30" maxlength="64" class="form-text required" />

</div>

<div class="form-item  form-item-homepage">

 <input type="text" id="edit-homepage" name="homepage" value="" size="30" maxlength="255" class="form-text" />
</div>
<div  id="edit-comment-body">

<label for="edit-comment-body-und-0-value">comment <span title="required" class="form-required">*</span></label>

<textarea class="text-full form-textarea required" id="edit-comment-body-und-0-value" name="comment_body[und][0][value]" cols="60" rows="5"></textarea></div>
</div>

jquery代码：

$(document).ready(function(){

if($("#comment-form #edit-name").val()=='' || $("#comments #edit-email").val() =='' ||$("edit-comment-body"))
$("#comments #edit-submit").click(function(){
   $('#comment-form #edit-name').append('<span style="color:red;">please type your name</p>');
   $('#comment-form #edit-mail').append('<span style="color:red;">please type your emali</p>');
  $('#comment-form #edit-comment-body label span').append('<span style="color:red;">pleae type the content</p>');
});

});

我想在输入文本后添加一些红色文本。但是上面的代码不能工作?我的jquery代码出了什么问题？谢谢

Answer 1

您使用ID comments提供的超文本标记语言中没有任何元素。也没有ID为edit-submit的元素。因此，选择器$("#comments #edit-submit")不会匹配任何元素。

这意味着您正在尝试将一个click侦听器绑定到一个不存在的元素。

通常，您应该避免过度限定选择器。因为元素ID必须是唯一的，所以元素ID选择器足以匹配(最多)单个元素。这意味着您可以更改以下内容：

• $("#comment-form #edit-name")到$("#edit-name")
• $("#comments #edit-submit")到$("#edit-submit")
• $('#comment-form #edit-mail')到$('#edit-mail')
• $('#comment-form #edit-comment-body label span')到

$('#edit-comment-body label span')

我已经修改了代码。它还是不能工作。

这是因为drupal.js调用了jQuery.noConflict()，这会使window.jQuery保持不变，但会删除window.$。在代码中使用jQuery而不是$，并将$作为参数传递给文档就绪回调：

jQuery(function($)
{
    if (!$("#edit-name").val() || !$("#edit-email").val() || !$("#edit-comment-body").val())
    {
        $("#edit-submit").click(function()
        {
            $('#edit-name').after('<span style="color:red;">请输入你的名字</span>');
            $('#edit-mail').after('<span style="color:red;">请输入你的邮箱</span>');
            $('#edit-comment-body label span').append('<span style="color:red;">请填写内容</span>');
        });
    }
});

Answer 2

第一个错误

if($("#comment-form #edit-name").val()=='' || $("#comments #edit-email").val() =='' ||$("edit-comment-body"))

在html表单中，$('#comments') id在哪里使用？？？

第二个错误应该是

在你的javascript中..将span附加到结束标记P？？？

希望能有所帮助。

Answer 3

对于初学者来说，传递给append函数的超文本标记语言没有任何意义：

<span style="color:red;">please type your name</p>

打开一个<span>元素，然后关闭一个<p>元素。