jQuery动态输入与正则匹配问题：匹配后切换输入Div异常隐藏

问题说明 #

已实现通过「Add」按钮动态添加name="item_color[]"的多颜色输入框，提交功能正常。需求是：只要任意输入框的值匹配正则/(blue|red|orange)/gmi，就显示#divcolor；所有输入框都无匹配时才隐藏。但当前逻辑存在异常：

• 输入“purple”无匹配，Div不显示（正常）
• 输入“blue”匹配，Div显示；删除“blue”后Div隐藏（正常）
• 输入“red”匹配，Div显示（正常）
• 输入“yellow”无匹配，Div隐藏（异常：此时已有其他输入框匹配“red”，Div应保持显示）

现有代码仅监听当前输入框的keyup事件，只判断当前输入框的值来控制显隐，完全忽略了其他输入框的状态，这是问题根源。

修复方案 #

基础版代码

// 定义匹配正则
const colorReg = /(blue|red|orange)/gmi;

// 封装判断所有输入框是否有匹配的函数
function hasMatchedColor() {
    // 遍历所有输入框，只要有一个匹配就返回true
    return $('input[name="item_color[]"]').toArray().some(input => {
        return colorReg.test(input.value);
    });
}

// 绑定Add按钮事件，添加新输入框并绑定监听
$("#add").click(function(e) {
    // 这里补充你添加新输入框的逻辑，比如：
    // $('<input type="text" name="item_color[]">').appendTo('#input-wrapper');
    
    // 给所有输入框重新绑定keyup事件
    $('input[name="item_color[]"]').off('keyup').on('keyup', function() {
        hasMatchedColor() ? $("#divcolor").show() : $("#divcolor").hide();
    });
});

// 页面加载时初始化已有输入框的监听
$(function() {
    $('input[name="item_color[]"]').on('keyup', function() {
        hasMatchedColor() ? $("#divcolor").show() : $("#divcolor").hide();
    });
});

优化版：事件委托（更高效）

如果频繁添加输入框，每次重新绑定事件会有冗余，改用事件委托绑定到输入框的父容器，无需每次添加后重新绑定：

const colorReg = /(blue|red|orange)/gmi;

function hasMatchedColor() {
    return $('input[name="item_color[]"]').toArray().some(input => colorReg.test(input.value));
}

// 事件委托：绑定到输入框的父容器（比如#input-wrapper）
$("#input-wrapper").on('keyup', 'input[name="item_color[]"]', function() {
    // 使用toggle方法直接根据布尔值控制显隐
    $("#divcolor").toggle(hasMatchedColor());
});

// Add按钮逻辑：添加新输入框到父容器
$("#add").click(function(e) {
    $('<input type="text" name="item_color[]">').appendTo('#input-wrapper');
});

// 页面初始化时先检查一次状态
$(function() {
    $("#divcolor").toggle(hasMatchedColor());
});

逻辑说明 #

1. 核心函数hasMatchedColor：遍历所有item_color[]输入框，用Array.some()判断是否存在至少一个匹配项，只要有一个匹配就返回true。
2. 每次任意输入框触发keyup时，调用该函数，根据返回值控制#divcolor的显隐：
   • 返回true（存在匹配）：显示Div
   • 返回false（全不匹配）：隐藏Div
3. 事件委托的方式避免了重复绑定事件，性能更优，尤其适合动态添加元素的场景。

内容的提问来源于stack exchange，提问作者Chris