Блог

Привет, я пытаюсь сделать кнопку поиска активной / неактивной в зависимости от того, ввел ли пользователь текст в ОБА текстовых поля. В настоящее время он становится активным, когда пользователь вводит текст только в первом поле. Может кто-нибудь, пожалуйста, скажите мне, что я делаю не так?? Заранее спасибо!

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

Получение одного и того же результата каждый раз.

При циклическом просмотре результатов селектора используйте синтаксис метода:

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

Синтаксис, который вы использовали, предназначен для перебора массива или объекта.

Смотрите следующую документацию:

• $.each
• $(selector).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);
});