我的jquery代码怎么了？

问题描述

| 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代码出了什么问题？谢谢

解决方法

有很多事情是错误的-首先使用选择器是不好的。您应尽可能使用单个ID，例如：

$(\"#edit-submit\")

下一个问题是，您正在浪费IF语句-首次加载页面时，您正在检查某些输入是否为空白-即使可能，即使您不愿意也不希望有人输入，它们仍可能是空白的以便能够清空并以有效方式传递，只是因为未添加用于监听ѭ3的函数。加载页面并且字段为空白后，然后将“ 3”侦听器添加到按钮。将“ 3”功能添加到按钮，然后始终检查有效性将更加容易。因此，例如，您可以将jQuery更改为如下形式：

$(\"#edit-submit\").click(function(e) {
    var name = $(\'#edit-name\');
    var mail = $(\'#edit-mail\');
    var comment = $(\'#edit-comment-body-und-0-value\');
    var blank = false;
    if (name.val()==\'\') {
        name.after(\'<span style=\"color:red;\">please type your name</span>\');
        blank = true;
    }
    if (mail.val()==\'\') {
        mail.after(\'<span style=\"color:red;\">please type your emali</span>\');
        blank = true;
    }
    if (comment.val()==\'\') {
        comment.after(\'<span style=\"color:red;\">pleae type the content</span>\');
        blank = true;
    }
    if (blank) {
        e.preventDefault();   
    }
});

您还需要添加一个提交按钮，但是我假设您错过了HTML复制粘贴中的内容：

<input type=\"submit\" id=\"edit-submit\" value=\"submit\" />

稍微解释一下jQuery：首先获取要检查的字段的值。现在，存储一个变量以检查是否有一个字段为空。现在检查每个值以查看是否为空。如果是这样，请使用.after（）添加您的消息，您将无法追加到输入，因此请将其放置在输入之后。还要在以后的代码中更改blank var 最后检查空白变量是否已更改并停止提交，否则浏览器提交不正确的表单时，该表单将短暂显示该消息。为了增强您的验证能力，您只希望错误消息一次，并且如果错误已得到纠正，但仍然存在，则应该删除已纠正的消息（想象多次单击提交）。为此，将一个类添加到您的错误消息：

<span style=\"color:red;\" class=\"error-message\">please type your name</span>

并且在您的功能的顶部：

$(\'.error-message\').remove();

所以最后的.click()函数：

$(\"#edit-submit\").click(function(e) {
    $(\'.error-message\').remove();
    var name = $(\'#edit-name\');
    var mail = $(\'#edit-mail\');
    var comment = $(\'#edit-comment-body-und-0-value\');
    var blank = false;
    if (name.val()==\'\') {
        name.after(\'<span style=\"color:red;\" class=\"error-message\">please type your name</span>\');
        blank = true;
    }
    if (mail.val()==\'\') {
        mail.after(\'<span style=\"color:red;\" class=\"error-message\">please type your emali</span>\');
        blank = true;
    }
    if (comment.val()==\'\') {
        comment.after(\'<span style=\"color:red;\" class=\"error-message\">pleae type the content</span>\');
        blank = true;
    }
    if (blank) {
        e.preventDefault();   
    }
});

看到它在这里工作我将尝试解释ѭ12部分。首先，IF语句...。基本上，IF语句表示：

if (what ever is in here is TRUE) {
    Do what ever code is written here....
}

因此，在.click()函数的顶部，我们声明了一个名为blank的变量并将其设置为FALSE。因此，如果在随后的代码中没有任何位置，直到我们到达IF语句将其更改为TRUE，该代码都将无法运行。因此，在代码中，每次我们检查输入之一是否为空时，我们都会添加一条消息并将“ 15”更改为TRUE，因此现在该IF语句中的代码将运行。在代码上，按ѭ12键是停止浏览器执行默认情况下正常工作的一种方式。因此，当我们声明一个回调函数（在本例中为.click()事件）时，我们正在让jquery侦听对某事的单击，因此当它获得一个时，该事件在代码中也可用。想象一下，由于网络开始时，如果有人单击超链接（<a href=\".....），浏览器就知道它需要遵循该链接，而不管jquery在做什么，同样，如果您提交表单，浏览器就知道它应该遵循该链接。在表单声明中声明的链接。现在，因为我们不想提交表格（如果有空格），则需要preventDefault()（防止浏览器执行其默认操作）。为此，当我们声明.click(function(e) {时，我们声明了一个新变量e，该变量在函数中可用，ѭ22the是导致触发.click()函数的事件-单击超链接，单击提交，甚至点击图片。我们可以将内容更改为更长的代码，以使其更容易理解，例如：e到event（实际显示您想要的任何内容）：

.click(function(event) {
    var blanks_found = false; // No blanks found yet.
    ........
    blah
    blah
    blah
    ........
    if (blanks_found == true) {
        event.preventDefault();
    }
});

, 第一个错误

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

$（\'＃comments \'）id在html形式中在哪里使用？？？ AND第二个错误应该是在您的javascript ..中，您要附加一个带有结束标记P的跨度？？？希望它的帮助。 ,您提供的ID为comments的HTML中没有任何元素。也没有ID为“ 30”的元素。因此选择器selector31ѭ将不匹配任何元素。这意味着您正在尝试将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>\');
        });
    }
});

, 对于初学者来说，传递给append函数的HTML没有任何意义：

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

打开<span>元素，然后关闭<p>元素。 , 另外，似乎您正在建立某种验证...我可以建议您使用已经尝试和测试过的东西，例如jQuery验证插件？它非常成熟，可以开箱即用地处理验证情况...使用自定义验证程序插件可以实现其他所有情况。一些演示可以在这里找到。

代码代码代码

我的jquery代码怎么了？

问题描述

解决方法

相关问答