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

Select my troublesome input by value using jQuery

本文关键字：我的 麻烦 输入 选择我 选择 jQuery 使用      更新时间：2023-09-26

我有类似的HTML输入，从voucher1到voucher10:

<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集合，忽略任何重复集合中索引最低的字段。

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

演示

注：

  1. j > i测试可确保：
    • 没有将每个字段与自身进行比较
    • 返回的集合中只包含索引较高的字段
  2. field_i.value != ''测试确保
    • 空字段不进行比较
相关文章：