Question

我的经验主要在于后端编码，主要是PHP。我在理解如何使用jQuery正确循环输入字段数组时遇到一些麻烦。我已经看到Stackoverflow上的Previous Posts与我自己的非常相似，但只是不同，足以让自己有些头痛。我相信这对于经验丰富的jQuery编码器来说是一个高手。

请记住，就jQuery和JS而言，我是一个相对初学者。 *我熟悉validated.js和jquery.validate.js，我正在尝试了解更多有关jQuery的信息，而且目前对其他插件不感兴趣。

我想做什么： 我试图从注册表单中获取输入字段，并根据字符长度分配不同程度的阈值，以及表单字段中的一些其他开关样式技巧。我能够用一个字段完成我想要的东西，但是，我想循环遍历这些字段并动态获取ID，因为它们在数组中的位置。

所以举个例子。我有输入字段以及＆＃34;字符长度＆＃34; span标记用于保存每个输入的.length()值以及错误div我可以将错误语句推送到.text()或.html()。

<h4>First name: <span id="ufnLenDis" class="lngthDisplay"><!--displays .length()--></span></h4>
<div id="err_usr_first_name"><!--displays errMSG--></div>
<div class="input-group col-sm-12">
  <input type="text" id="usr_first_name" class="form-control" placeholder="First Name">
</div>

（更新:) 使用jQuery，我想将某些输入字段ID's分类为变量或对象数组。像验证阈值一样。多个输入字段的最大值为1，限制为60个字符，其他输入字段的最大值为8，限制为30个字符。适用于某些字段但不是全部的不同函数和变量组的特定限制和/规则。所以我创建了一个变量并添加了像id字段这样的字段来运行循环。

实际上这些规则是附属的，但我想概述我对这些功能之一的目标。

所以这是我在单个表单条目中所需的输出。 *我正在使用bootstrap和最新的jquery插件以及animated.css / js。 *字符输入阈值= 2 - 60

长度=== 0删除所有＆＃34; bootstrap＆＃34;所有相关标签中的警报和任何与输入相关的输出语句。
长度=== 1
- 添加bootstrap alert alert-info并删除所有其他警报相关类
- 在输入div的标题标记内保存的span标记中的输出字符长度也添加类以更改颜色以与警报正确的警报颜色相关
- 在正确的警报配置中输出错误div中的警报消息
长度> 1或者＆lt; 59
- 添加alert-success，删除所有其他提醒类
- 在其他相对标签中添加和删除相关类。
- 告知客户他们即将达到角色阈值的限制。
长度=== 59 - 重置可能超过计数的警报
- 添加alert-success，删除所有其他提醒类
- 在其他相对标签之间添加和删除相关类。
长度=== 60
- 添加alert-warning类并从标记中删除其他警报类
- 添加animated shake以引起对字段输入的注意。
- 告知客户他们已达到错误字段中允许字符的限制。
长度＆gt; 60
- 添加attr。（＆＃34;禁用＆＃34;）并在所有相关标签类中设置alert-danger。

这是我想要做的工作的一个工作小说：

Jfiddle of single input field working

同样，这是一个单一的输入字段，我想采取如下的代码并通过.each（）循环它，并使用键/值对来构建来自同一表单的多个表单字段的验证，但有些字段不会通过该函数运行。

这是我尝试使用.each()函数的一个小问题 Multiple input entries not working

我真的只是寻求一些帮助，使用一个变量来正确构造jQuery循环，该变量标识我希望通过添加特定阈值的特定函数运行的输入字段的ID。

我的代码位于每个jfiddle中。第一个Jfiddle链接是我希望它执行的字段的工作示例。第二个是我尝试循环函数以将规则应用于来自表单的多个ID。

以下是没有CDN扩展名的原始代码。以下代码片段一次只需一个输入字段即可满足我的需求。但是，无论何时我尝试使用我看过的示例添加.each循环，它都会破坏我的代码。我尝试添加以下行并使用键/值对作为函数内任何val（）调用的替换。 $.each([ "#usr_first_name", "#usr_last_name", "#usr_company_name", "usr_city_name"], function( index, value ) {，然后使用索引/值对通过替换each（）函数中的值的任何调出来构造函数。请参阅我的链接＆＃34;非工作＆＃34;以jfiddle为例。

Non working example of multiple fields

working example of single field（以下代码）

var input = $('#proper_config');
$('#lenDis').text(input.val().length);
input.bind('keydown, keyup', function(e) {
  var spart = input.val().split(" ");
  for (var i = 0; i < spart.length; i++) {
     var j = spart[i].charAt(0).toUpperCase();
     spart[i] = j + spart[i].substr(1);
  }
$(this).val(spart.join(" "));
$('#lenDis').html("Character count: " + input.val().length).addClass("danger").removeClass("warning success info");
if (input.val().length === 0) {
  input.removeClass("alert-info alert-success alert-warning alert-danger");
  $('#lenDis').removeClass().addClass("hidden");
  $('#err').empty();
} else if (input.val().length === 1) {
  input.addClass("alert alert-info");
  $('#lenDis').addClass("info").removeClass("danger success warning hidden");
  $('#submitBTN').removeAttr('disabled');
  $('#err').empty().html("Input field must have 2 or more characters and no more than 60 characters.");
} else if (input.val().length >= 2 && input.val().length < 59) {
  input.removeClass("alert-info").addClass("alert alert-success");
  $('#lenDis').removeClass("danger info waring").addClass("success");
  $('#err').empty();
} else if (input.val().length === 59) {
  $('#lenDis').removeClass("warning info danger").addClass("success");
  input.removeClass("alert-warning alert-info alert-danger").addClass("alert alert-success");
  $('#submitBTN').removeAttr('disabled');
  $('#err').empty();
} else if (input.val().length === 60) {
  $('#err').removeClass().html("<small>You have reached the max amount of characters allowed for this field!<small>");
  $('#lenDis').addClass("warning");
  input.removeClass("alert-info alert-success alert-danger").addClass("alert alert-warning");
  $('#submitBTN').removeAttr('disabled');
} else if (input.val().length > 60) {
  $('#err').removeClass().empty().addClass("danger").html("You have exceeded the amount of characters allowed for this field!.");
  input.removeClass("alert-info alert-success alert-warning").addClass("alert alert-danger");

任何帮助将不胜感激！

Answer 1

正如jsfiddle：https://jsfiddle.net/Lb19rcxy/3/中记录的代码所示，您已经调用了几个DOM ID元素：

var valLenSixty = ("#usr_first_name", "#usr_last_name", "#usr_company_name", "#usr_city");

因此，当您通过某个事件监听器（例如keyup和keydown）附加/绑定这些元素时，它无法确定您放置它的DOM元素：

您可以通过将它们包装在单个/双引号中来解决此问题，如下所示：

var valLenSixty = $("#usr_first_name, #usr_last_name, #usr_company_name, #usr_city");

现在，对于您使用$.each的情况，我不认为有必要使用此功能，因为您事先已在变量valLenSixty中调用了它们。

您可以在事件处理程序中使用$(this).val()来调用每个值，如下所示：

valLenSixty.bind('keydown, keyup', function(e) {
    console.log($(this).val());
});

然后我注意到你已经分配了另一个变量：

var lenDis = ("#ufnLenDis", "#ulnLenDis", "#ucnLenDis", "#uccLenDis");
var errDis = ("#err_usr_first_name", "#err_usr_last_name",

您还可以为attribute添加另一个data_len_dis_id（例如input）来简化此操作：

示例：

<input type="text" id="usr_company_name" class="form-control" placeholder="Company Name" data_len_dis_id="ucnLenDis">

您可以从中调用它们：$(this).attr('data_len_dis_id');

var valLenSixty = $("#usr_first_name, #usr_last_name, #usr_company_name, #usr_city");

valLenSixty.bind('keydown, keyup', function(e) {
    console.log($(this).val());
    var spart = $(this).val().split(" ");
    for (var i = 0; i < spart.length; i++) {
        var j = spart[i].charAt(0).toUpperCase();
        spart[i] = j + spart[i].substr(1);
    }

    var sDataLenDisId = $(this).attr('data_len_dis_id'); // expected output: ucnLenDis
    var oSpanDisplay = $('.form_group').find('span#' + sDataLenDisId).html("Character count: " + $(this).val().length).addClass("danger").removeClass("warning success info");

    // Rest of your code
});

以下是经过修订的js代码供进一步参考： https://jsfiddle.net/L07mvLqz/

希望这有助于您的情况。

jQuery初学者 - 在循环通过* selective *输入字段

1 个答案: