jquery選擇器 - 編號問題

我做了一個表單與ajax電子郵件驗證。我的問題是我需要有超過1個電子郵件輸入字段。我寫的jquery中的代碼只能用於其中一個。我不想使用該解決方案的副本並粘貼更改ID，因爲它效率不高，而且電子郵件字段的數量也不是恆定的。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, 
     )), 
    )); 
} 
?>

謝謝！

來源

2011-01-24 Michal

我看不出爲什麼你需要在類上使用ID。 – zzzzBov 2011-01-24 17:29:55

是的，我不需要使用如此多的ID，只有一個ID，其餘的都是類。我會改變這一點。謝謝。 – Michal 2011-01-24 17:33:33

嘗試這樣做 -

先給普通類名說郵件到你的基本觸發因素（在你的例子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。

即使存在未知數量的元素，它也可以工作。

試一試，讓我知道。

來源

2011-01-24 17:42:11 Alpesh

將您的專注操作更改爲獨立的JavaScript功能。然後使用jQuery中的$.bind函數將每個字段綁定到新函數。使用「this」變量$(this).css()來選擇函數中的元素。

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

來源

2011-01-24 17:30:58

嗨！感謝幫助。我試圖使用您的解決方案，但我遇到了一些問題，在我修復它們之前出現了另一個解決方案此外，我不知道如何自動綁定功能與所有電子郵件字段（其數量的變化）。 – Michal 2011-01-24 18:14:09

jquery選擇器 - 編號問題

回答

相關問題