Непонятная ошибка при использовании keyup в jquery

verfaa

verfaa

Профессор
Регистрация
29 Янв 2007
Сообщения
417
Реакции
49
Итак, есть форма с полями. В этой форме 2 поля обязательны к заполнению, причем одно поле должно содержать число от 1 до 99, а второе от 400 до 15000. Если при заполнении в полях прописаны подходящие данные показываем кнопку далее:
Код: 
<img src="continue.png" alt="next" style="display: none;" id="next_kar" />
если что-то не так - прячем её. Вроде все просто.

Сделав обработку 1 поля таким образом на jquery я обрадовался - все работает как надо:
Код: 
$('#karniz_asp').keyup(function(){
                    var karniz_asp_cnt = $('#karniz_asp_cnt').val();

                    if(karniz_asp_cnt > 0 && karniz_asp_cnt < 100) {
                        $('.karniz_asp_cnt_error').css('display','none');
                        $('#next_karniz_asp').css('display','block'); // Показываем кнопку продолжить
                    } else {
                        $('.karniz_asp_cnt_error').css('display','block');
                        $('#next_karniz_asp').css('display','none'); // Прячем кнопку продолжить
                    }
                });

и для второго поля прописал аналогично:
Код: 
                $('#karniz_asp_dlina').keyup(function(){
                    var karniz_asp_dlina_cnt = $('#karniz_asp_dlina').val();

                    if(karniz_asp_dlina_cnt > 399 && karniz_asp_dlina_cnt < 15001) {
                        $('.karniz_asp_error').css('display','none');
                        $('#next_karniz_asp').css('display','block'); // Показываем кнопку продолжить
                    } else {
                        $('.karniz_asp_error').css('display','block').html("Длина должна быть от 400 до 15000мм.");
                        $('#next_karniz_asp').css('display','none'); // Прячем кнопку продолжить
                    }
                });

И оказалось, что для второго поля показ/сокрытие кнопки уже почему-то не работает!
Попробовал для первого поля убрать строки:
Код: 
$('#next_karniz_asp').css('display','block');
$('#next_karniz_asp').css('display','none');
и для второго поля все чудесным образом заработало.

Вопрос, почему возник конфликт? Как в моем случае правильно сделать?
Почему если прописать
Код: 
$('#next_karniz_asp').css('display','block');
$('#next_karniz_asp').css('display','none');
только в одном блоке $('#karniz_asp_dlina').keyup(function(){ });, все работает. А если добавить этот код во второй блок $('#karniz_asp_dlina').keyup(function(){ }); во втором блоке уже не работает?
Прошу помощи.
 
Лично я не совсем понял, как ко всему этому коду относится картинка:
HTML: 
<img src="continue.png" alt="next" style="display: none;" id="next_kar" />
 
verfaa написал(а):
Итак, есть форма с полями. В этой форме 2 поля обязательны к заполнению, причем одно поле должно содержать число от 1 до 99, а второе от 400 до 15000. Если при заполнении в полях прописаны подходящие данные показываем кнопку далее:
Код: 
<img src="continue.png" alt="next" style="display: none;" id="next_kar" />
если что-то не так - прячем её. Вроде все просто.

Сделав обработку 1 поля таким образом на jquery я обрадовался - все работает как надо:
Код: 
$('#karniz_asp').keyup(function(){
                    var karniz_asp_cnt = $('#karniz_asp_cnt').val();

                    if(karniz_asp_cnt > 0 && karniz_asp_cnt < 100) {
                        $('.karniz_asp_cnt_error').css('display','none');
                        $('#next_karniz_asp').css('display','block'); // Показываем кнопку продолжить
                    } else {
                        $('.karniz_asp_cnt_error').css('display','block');
                        $('#next_karniz_asp').css('display','none'); // Прячем кнопку продолжить
                    }
                });

и для второго поля прописал аналогично:
Код: 
                $('#karniz_asp_dlina').keyup(function(){
                    var karniz_asp_dlina_cnt = $('#karniz_asp_dlina').val();

                    if(karniz_asp_dlina_cnt > 399 && karniz_asp_dlina_cnt < 15001) {
                        $('.karniz_asp_error').css('display','none');
                        $('#next_karniz_asp').css('display','block'); // Показываем кнопку продолжить
                    } else {
                        $('.karniz_asp_error').css('display','block').html("Длина должна быть от 400 до 15000мм.");
                        $('#next_karniz_asp').css('display','none'); // Прячем кнопку продолжить
                    }
                });

И оказалось, что для второго поля показ/сокрытие кнопки уже почему-то не работает!
Попробовал для первого поля убрать строки:
Код: 
$('#next_karniz_asp').css('display','block');
$('#next_karniz_asp').css('display','none');
и для второго поля все чудесным образом заработало.

Вопрос, почему возник конфликт? Как в моем случае правильно сделать?
Почему если прописать
Код: 
$('#next_karniz_asp').css('display','block');
$('#next_karniz_asp').css('display','none');
только в одном блоке $('#karniz_asp_dlina').keyup(function(){ });, все работает. А если добавить этот код во второй блок $('#karniz_asp_dlina').keyup(function(){ }); во втором блоке уже не работает?
Прошу помощи.
Нажмите для раскрытия...

тут не ошибка ли:
Код: 
$('#karniz_asp').keyup(function(){
                    var karniz_asp_cnt = $('#karniz_asp_cnt').val();
при обработке #karniz_asp вы пытаетесь взять данные из поля с айди #karniz_asp_cnt, хотя надо бы с #karniz_asp

во-вторых, при одном верном и одном неверном условиях у вас кнопка все равно будет показываться.
может через setInterval проверять? например, так: Для просмотра ссылки Войди или Зарегистрируйся
то есть кнопка должна показываться только если оба поля заполнены верно, если я правильно понял.
 
как-то вот так (в верстку не заглядывал, с корректность обращения к узлам сами разберетесь, если что) :
HTML: 
(function($){

    var is_karniz_asp = false,
        is_karniz_asp_dlina = false,
        karniz_asp_cnt_error = $('.karniz_asp_cnt_error'),
        karniz_asp_error = $('.karniz_asp_error');

    $('#karniz_asp').keyup(function(){
        var karniz_asp_cnt = $(this).val();

        is_karniz_asp = (karniz_asp_cnt > 0 && karniz_asp_cnt < 100);

        karniz_asp_cnt_error.css('display', (is_karniz_asp_dlina ? 'none' : 'block'));

        show_next_button();
    });

    $('#karniz_asp_dlina').keyup(function(){
        var karniz_asp_dlina_cnt = $(this).val();

        is_karniz_asp_dlina = (karniz_asp_dlina_cnt > 399 && karniz_asp_dlina_cnt < 15001);

        karniz_asp_error.css('display', (is_karniz_asp_dlina ? 'none' : 'block'))
            .html("Длина должна быть от 400 до 15000мм.");

        show_next_button();
    });

    function show_next_button(){

        if( is_karniz_asp && is_karniz_asp_dlina ){

            $('#next_karniz_asp').css('display','block'); // Показываем кнопку продолжить
        }
        else{

            $('#next_karniz_asp').css('display','none'); // Прячем кнопку продолжить
        }
    }

})($);
 
может через setInterval проверять? например, так: Для просмотра ссылки Войди или Зарегистрируйся
Нажмите для раскрытия...
Не.. эт нехорошо. Логично проверять при изменении (change или для "быстрого" определения key(up|down|press)) одного из полей.

В варианте BDSG общий кусок кода вынесен, это правильно. Однако, ИМХО, "нагорожено" (хотя вроде ничего лишнего) + куча глобальных переменных..
Для "прячем/показываем", опять же считаю, что правильнее show() / hide() использовать.
Ну и до кучи, если появится третий, четвёртый параметр - придётся ещё "городить".

Считаю, вполне уместно использовать решения вроде:
Для просмотра ссылки Войди или Зарегистрируйся (доки: Для просмотра ссылки Войди или Зарегистрируйся )

И да, если будет "правильный" html+css-код, можно уменьшить JS код за счёт использования классов (как-то так примерно: parent().addClass('error')) даже без дополнительных плагинов ..

Хотя.. хороший код - который работает. :)
 
esche написал(а):
... куча глобальных переменных..
Нажмите для раскрытия...
чего-чего?.. а ничего, что весь код в анонимном замыкании и все переменные локальны для него?.. ;)

если появится третий, четвёртый параметр - придётся ещё "городить".
Нажмите для раскрытия...
тогда надо будет просто другое решение реализовывать..
 
Последнее редактирование:
Для просмотра ссылки Войди или Зарегистрируйся, не надо плодить сущности сверх меры.. правило третьего повторения все же помнят, да?.. ))

Вот-вот.. другое решение с ещё третьим, четвёртым копипастом этой функции с другими ID-шниками :D... А потом рассказывают про DRY.. Видел, на одном проекте так картинки пережимались... $image1 = ...; $image5 = ...; (вместо многоточия - работа с изображением "ручками", без библиотек)
Нажмите для раскрытия...
не преграды долбо#бам.. ))
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху