jQuery 初学者 - 需要有关 .each() 的帮助以遍历 *选择性* 输入字段

Question

我的经验主要在于后端编码，PHP 主要是。我在理解如何使用 jQuery 正确循环输入字段 ID 数组时遇到了一些问题。我在 Whosebug 上看到的以前的帖子与我自己的非常相似，但差异足以让我自己头疼。我相信对于经验丰富的 jQuery 编码员来说，这将是一个天才。

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

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

举个例子。我有我的输入字段以及 "character length" 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，我想 class 将某些输入字段 ID's 确认为变量或 object 数组。就像验证阈值一样。多个输入字段最多可包含 1 个字符，最多可包含 60 个字符，而其他输入字段最多可包含 8 个字符，最多可包含 30 个字符。针对适用于某些但并非全部的不同功能和变量组的特定限制and/rules。所以我创建了一个变量，并通过循环将 id 字段添加到 运行。

这些规则确实是辅助性的，但我想概述一下我对这些功能之一的 objective。

这是我希望在单个表单条目中输出的结果。 *我正在使用 bootstrap 和最新的 jquery 插件以及动画。css/js。 *字符输入阈值 = 2 - 60

1. 长度为 === 0 删除所有 "bootstrap" 警报和所有相关标签中的任何输入相关输出语句。
2. 长度为=== 1
   • 添加 bootstrap alert alert-info 并删除所有其他与警报相关的 classes
   • 输入 header 标签内的 span 标签中的输出字符长度 div 还添加 class 以更改颜色以与警报正确的警报颜色相关联
   • 在正确的警报配置中 div 输出错误警报消息
3. 长度 > 1 或 < 59
   • 添加 alert-success，删除所有其他警报 classes
   • 在其他相关标签中添加和删除相关 classes。
   • 通知客户他们即将达到字符阈值的限制。
4. 长度为 === 59 - 重置可能超过计数的警报
   • 添加 alert-success，删除所有其他警报 classes
   • 在其他相关标签中添加和删除相关 classes。
5. 长度===60
   • 添加 alert-warning classes 并从标签中删除其他警报 classes
   • 添加animated shake以引起对字段输入的关注。
   • 通知客户他们已达到错误字段中允许的字符数限制。
6. 长度 > 60
   • 添加 attr.("disabled") 并在所有相关标签中放置 alert-danger classes.

这是我想做的工作的小提琴：

Jfiddle of single input field working

同样，这是一个单一的输入字段，我想采用如下代码并将其循环遍历 .each() 并使用 key/value 对来构造来自的多个表单字段的验证同样的表格，但有些字段不会运行通过函数。

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

我真的只是在寻求一些帮助，以使用一个变量来正确构建 jQuery 循环，该变量标识我想要 运行 通过添加特定功能的输入字段的 ID阈值。

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

这是没有 CDN 扩展的原始代码。 以下代码片段一次只处理一个输入字段，可以满足我的需求。 但是，每当我尝试使用我见过的示例添加 .each 循环时，它都会破坏我的代码。我尝试添加以下行并使用 key/value 对作为函数内任何 val() 调用的替代。 $.each([ "#usr_first_name", "#usr_last_name", "#usr_company_name", "usr_city_name"], function( index, value ) {，然后使用 index/value 对通过替换 each() 函数中值的任何调用来构造函数。有关示例，请参阅我的 linked "non-working" 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",

您还可以通过为您的 input 放置另一个 attribute（例如 data_len_dis_id）来简化此操作：

示例：

<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/

希望这对您的情况有所帮助。