Question

您好我正在尝试根据用户是否在两个文本框中输入文本来使搜索按钮处于活动/非活动状态。目前，当用户仅在第一个框上输入文本时，它变为活动状态。任何人都可以告诉我我做错了什么？提前谢谢！

$(".searchBtn.active").hide();
$(".searchBtn.inactive").prop('disabled', true);

$.each($(".searchFormContent input[type=text]"), function () {
     $(this).keyup(function () {
         if ($(this).val().length > 0) {
             $(".searchBtn.inactive").hide();
             $(".searchBtn.active").show();
         } else {
             $(".searchBtn.active").hide();
             $(".searchBtn.inactive").show();
         }
     });
});

我现在试过这个：

$(".searchFormContent input[type=text]").each(function () {
            $(this).keyup(function () {
                if ($(this).val().length > 0) {
                    $(".searchBtn.inactive").hide();
                    $(".searchBtn.active").show();
                } else {
                    $(".searchBtn.active").hide();
                    $(".searchBtn.inactive").show();
                }
            })
        });

和此：

$(".searchFormContent input[type=text]").keyup(function () { if ($(this).val().length > 0) { $(".searchBtn.inactive").hide(); $(".searchBtn.active").show(); } else { $(".searchBtn.active").hide(); $(".searchBtn.inactive").show(); } });

每次都获得相同的结果。

Answer 1

循环选择器的结果时，请使用方法语法：

$(".searchFormContent input[type=text]").each(...);

您使用的语法是循环数组或对象。

请参阅以下文档：

但是，绑定事件处理程序时不需要使用.each()，事件处理程序方法直接在选择器上运行：

$(".searchFormContent input[type=text]").keyup(function() ...);

要解决您遇到的问题，您需要在事件处理程序中循环：

$(".searchFormContent input[type=text]").keyup(function() {
    var allFilled = true;
    $(".searchFormContent input[type=text]").each(function() {
        if (this.value == '') {
            allFilled = false;
            return false; // End the loop
        }
    });
    $(".searchBtn.inactive").toggle(!allFilled);
    $(".searchBtn.active").toggle(allFilled);
});

Jquery每个循环不适用于文本输入

1 个答案: