Question

我有与此类似的HTML输入，来自voucher1 - voucher10：

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

有10个字段，每个字段都有唯一的名称和ID。我目前有一个函数，它将字段值组合成一个数组，并返回一个名为 duplicate 的变量，如果以前输入了凭证的话。然后目标是选择具有最大ID的输入（即字母数字：凭证10将大于凭证8）并且使包含该副本的字段为空，同时显示＆＃34;不允许重复＆＃34;消息。

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

我宁愿不循环浏览每张优惠券并单独检查。似乎jQuery可以检查包含＆＃34; ninja＆＃34;的所有输入。然后我可以使用.val("")将其清零。这很棘手，因为HTML属性＆＃34;值＆＃34;从不改变。有什么想法吗？

这是我的代码，在任何人需要它的情况下找到数组中的副本，但主要焦点是选择其值属性永不改变的HTML输入。以下功能除了＆＃34; .ninja＆＃34;包含另一个失败尝试的部分：

$(".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" );
    }
}
});

Answer 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 != ''测试确保了这一点
- 不比较空字段

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

1 个答案: