Question

我用ajax电子邮件验证制作了一个表单。我的问题是我需要有超过1个电子邮件输入字段。我写的jquery中的代码只能用一个。我不想使用复制和粘贴更改ID的解决方案，因为它效率不高，而且电子邮件字段的数量也不是恒定的。

这是我的js文件：

// 0 - email not valid
// 1 - email valid
$(document).ready(function() {
    $("#ClientEmail_0").focusout(function() {
        // span with loader gif
        $("#ajax_status_0").css('display','inline');
        // span with the results
        $("#email_ajax_result_0").css('display','none');
        var $email = $("#ClientEmail_0").val();
        $.post("/reservations/reservations/ajax_check_email/",{data:{Client:{email:$email}}},function(data) {
            $("#ajax_status_0").css('display','none');
            if (data == 1) {
                $("#email_ajax_result_0").attr('class','ajax_success');
                $("#email_ajax_result_0").text('Email is available');
            } 
            if (data == 0){
                $("#email_ajax_result_0").attr('class','ajax_error');
                $("#email_ajax_result_0").text('You are already our client. Proceed with the reservation.');

            }
            $("#email_ajax_result").css('display','inline');
        });
    });
});

这是我的观点：

<?php
for($i = 0 ; $i < $this->params['nr'] ; $i++){
    echo $this->Form->input('Client.'.$i.'.email', array(
        'label'=>$this->Html->tag(
            'span', 
            $html->image("icons/ajax-loader.gif", array(
                "alt" => "loading",
            )), 
            array(
            'id' => 'ajax_status_'.$i,
            )), 
        'div'=>'IconMail clearValue',
        'after' => $this->Html->tag(
            'span', 
            '', 
            array(
            'id' => 'email_ajax_result_'.$i,
        )),
    )); 
} 
?>

谢谢！

Answer 1

将您的焦点操作更改为独立的javascript函数。然后使用jquery中的$.bind函数将每个字段绑定到新函数。使用“this”变量$(this).css()选择函数中的元素。

$("#ClientEmail_0").bind('focusout', yourNewFunction);
$("#ClientEmail_1").bind('focusout', yourNewFunction);

Answer 2

尝试这样做 -

首先给公共类名称说邮件到你的基本触发元素（在你的示例ClientEmail_0中）

然后使用以下代码。

$(document).ready(function() {
    $(".mail").focusout(function() {
        var id = $(this).attr('id');
        // span with loader gif
        $("#ajax_"+id).css('display','inline');
        // span with the results
        $("#email_"+id).css('display','none');
        var $email = $("#"+id).val();
        $.post("/reservations/reservations/ajax_check_email/",{data:{Client:{email:$email}}},function(data) {
            $("#ajax_"+id).css('display','none');
            if (data == 1) {
                $("#email_"+id).attr('class','ajax_success');
                $("#email_"+id).text('Email is available');
            } 
            if (data == 0){
                $("#email_"+id).attr('class','ajax_error');
                $("#email_"+id).text('You are already our client. Proceed with the reservation.');

            }
            $("#email_"+id).css('display','inline');
        });
    });
});

将您的视图编辑为此 -

<?php
for($i = 0 ; $i < $this->params['nr'] ; $i++){
    echo $this->Form->input('Client.'.$i.'.email', array(
        'label'=>$this->Html->tag(
            'span', 
            $html->image("icons/ajax-loader.gif", array(
                "alt" => "loading",
            )), 
            array(
            'id' => 'ajax_ClientEmail_'.$i,
            )), 
        'div'=>'IconMail clearValue',
        'after' => $this->Html->tag(
            'span', 
            '', 
            array(
            'id' => 'email_ClientEmail_'.$i,
        )),
    )); 
} 
?>

上面示例中的基本思想是基本触发器元素的id应该出现在每个其他元素的id中。

例如：

如果主要触发元素id是ClientMail 然后进一步的元素id成为

email_ClientMail

ajax_ClientMail

即第一部分是常数，另一部分是主要元素id。

即使存在未知数量的元素，它也会起作用。

尝试一下，让我知道。

jquery选择器 - id问题

2 个答案: