JQuery селекторы - проблема с идентификатором

Question

Я сделал форму с проверкой электронной почты ajax. Моя проблема в том, что мне нужно иметь более одного поля ввода электронной почты. Код в jquery, который я написал, работает только с одним. Я не хочу использовать решение с копированием и вставкой, изменяя идентификатор, потому что оно неэффективно, а также количество полей электронной почты не является постоянным.

Это мой 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

Попробуйте сделать это -

Сначала дайте общее имя класса, скажем, mail, вашему базовому триггерному элементу (в вашем примере 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,
        )),
    )); 
} 
?>

Моя основная идея в приведенном выше примере заключается в том, что идентификатор базового триггерного элемента должен присутствовать в каждом последующем элементе, например.

:

если идентификатор основного триггерного элемента, скажем, ClientMail, то идентификатор следующих элементов становится

email_ClientMail

ajax_ClientMail

, то есть первая часть является постоянной, а дальнейшая частьэто идентификатор основных элементов.

он будет работать даже при неизвестном количестве элементов.

Попробуйте и дайте мне знать.

Answer 2

Измените действие фокуса на отдельную функцию javascript. Затем используйте функцию $. Bind в jquery, чтобы привязать каждое поле к новой функции. Используйте переменную "this" $(this).css(), чтобы выбрать элемент в вашей функции.

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