jqueryセレクタ - idの問題

Question

私はajax電子メール検証でフォームを作成しました。私の問題は、1つ以上の電子メール入力フィールドが必要なことです。私が書いたjqueryのコードは、1つだけで動作します。効率的ではなく、電子メールフィールドの量も一定ではないため、コピー＆ペーストで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

これをやって試してみてください -

まず、以下のコードを使用して、共通のクラス名は、（あなたの例ではClientEmail_0 1）基本的なトリガ素子にメールを言う

を与えます。

$(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。

未知数の要素がある場合でも機能します。

試してみてください。

Answer 2

スタンドアロンのjavascript関数にフォーカスアウトアクションを変更します。次に、jqueryの$.bind関数を使用して、各フィールドを新しい関数にバインドします。 "this"変数$(this).css()を使用して、関数内の要素を選択します。

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