使用 jQuery 按值选择我麻烦的输入答案

【问题标题】：Select my troublesome input by value using jQuery使用 jQuery 按值选择我麻烦的输入
【发布时间】：2014-09-22 16:54:37
【问题描述】：

我有与此类似的 HTML 输入，从凭证 1 到凭证 10：

<input maxlength="20" type="text" name="voucher1" id="voucher1" title="Voucher" class="input" value="">

有 10 个字段，每个字段都有唯一的名称和 ID。我目前有一个函数，它将字段值组合到一个数组中，如果之前输入了凭证，则返回一个称为 duplicate 的变量。然后，目标是选择具有最大 ID 的输入（即按字母数字表示：voucher10 将大于 voucher8）并将包含此重复项的字段设为空，同时显示“不允许重复”消息。

我的重复变量函数运行良好，它使用.on(input, function) 立即返回重复值。每当我输入重复值时，我也会显示消息。我遇到的问题是甚至选择一个与重复值匹配的输入。如果我检查浏览器中的输入，我输入的值似乎没有 DOM 表示。我可以在 3 或 4 个字段中输入“ninja”，但它永远不会显示。因此，我似乎无法根据值选择输入。

我宁愿不遍历每张凭证并单独检查。似乎 jQuery 可以检查所有包含“ninja”的输入，然后我可以使用.val("") 将其清空。这很棘手，因为 HTML 属性“值”永远不会改变。有什么想法吗？

这是我的代码，它可以在数组中找到重复项，以防万一有人需要它，但主要关注点是选择一个其 value 属性永远不会改变的 HTML 输入。除了“.ninja”包含另一个失败尝试的部分之外，以下函数可以正常工作：

$(".voucher-input").focusout(function(){
var sorted_goodvouchers = vouchers.sort(); // You can define the comparing function here. 
                             // JS by default uses a crappy string compare.
var results = [];
for (var i = 0; i < vouchers.length - 1; i++) {
    if (sorted_vouchers[i + 1] == sorted_vouchers[i]) {
        results.push(sorted_vouchers[i]);
        // if there are duplicates
        console.log("results");
        console.log(results);
        $(".ninja"):contains(results).val("fail");
        $( "#dupmsg" ).show( "slow" );
    } else {
      $( "#dupmsg" ).hide( "slow" );
    }
}
});

【问题讨论】：

您是否已经在 jquery 中尝试过值选择器？ (stackoverflow.com/questions/5060652/…)
请发布您的重复检测代码。我希望解决方案是对其进行一些轻微的修改。
你不能根据类名进行选择，并且有一个跟踪排名的数据属性吗？
您似乎想要的是重复检测函数返回，而不是重复值，而是任何需要清空的字段的索引（或 ids 或 jQuery 选择）。跨度>
你想要一个函数来过滤一个现有的 jQuery 集，只过滤那些值与给定字符串匹配的那些？如本例中的jsfiddle.net/ekp52tqb ？尝试在每个字段中输入，然后在文本中输入以匹配输入字段

标签： javascript jquery input

【解决方案1】：

我承认我不太了解您当前的重复检测功能。它与我对您要达到的目标的描述的理解不符。特别是，我不认为有必要对任何东西进行排序。排序是昂贵的，应该避免。

如果我的理解是正确的，那么我将使用重复检测函数来构建并返回一个 jQuery 集合，其中包含具有重复值的字段，而忽略任何重复集合中索引最低的那些。

$(function($) {
    function findDuplicates($fields) {
        var duplicates = []; //empty array
        $fields.each(function (i, field_i) {
            $fields.each(function (j, field_j) {
                if (j > i && field_i.value != '' && field_i.value === field_j.value) {
                    duplicates.push(field_j);
                }
            });
        });
        return $(duplicates); //return a jQuery collection of duplicate fields
    }

    var $voucherFields = $("input[name^='voucher']").on('focusout', function () {
        var $duplicates = findDuplicates($voucherFields.removeClass('duplicate')).addClass('duplicate');
        if ($duplicates.length) {
            $("#message").text("No duplicates allowed"); //put message in the message field
        }
    });
});

DEMO

注意事项：

j > i 测试确保：
- 每个字段不与自身进行比较
- 返回的集合中只包含索引较高的字段。
field_i.value != '' 测试确保
- 不比较空字段

【讨论】：