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选择器 - 编号问题

回答

相关问题