Блог

Главная - Вопросы по программированию - Обновление backgroundColor в реальном времени на основе значения поля ввода с помощью jQuery?

Обновление backgroundColor в реальном времени на основе значения поля ввода с помощью jQuery?

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

Я создаю небольшой скрипт, который изменяет содержимое и css в реальном времени на странице на основе значений различных полей ввода.

Я могу изменить содержимое «в реальном времени» абсолютно нормально, как вы увидите здесь: http://jsfiddle.net/tctc91/eQwsE /

Я не могу заставить это работать с методом css, используя те же принципы: http://jsfiddle.net/tctc91/Tnc8p /

Спасибо!

Ответ №1:

Замените второе bgColor на $(this).val() .

Вы присвоили начальное значение bgColor , а затем никогда не переназначаете ему новое значение.

jsFiddle.

Комментарии:

1. Это гораздо более эффективный метод, о котором я не подумал. Приятно!

Ответ №2:

Вам просто нужно определить переменную bgColor после ее ввода пользователем. Вот скрипка, которая делает именно это.

Что я сделал, так это скопировал переменную bgcolor и снова поместил ее в функцию keyup. Таким образом, он снова определяет переменную после нажатия клавиши.

Скрипка работает отлично.

Ответ №3:

Вы забываете переустанавливать переменную bgcolor при каждом изменении ввода:

Попробуйте это:

 $(function() {
    var bgColor = $('#colorpickerField1').val();   
    $('body').css("backgroundColor",'#'   bgColor);

    $('#colorpickerField1').change(function() {
       var bgColor = $('#colorpickerField1').val();
       $('body').css("backgroundColor",'#'   bgColor);
    });
});

Ответ №4:

Вам нужно снова установить bgColor значение. Я также добавил небольшую проверку, равна ли его длина 3 или 6 символам.

 $(function() {
    var bgColor = $('#colorpickerField1').val();   
    $('body').css("backgroundColor",'#'   bgColor);

    $('#colorpickerField1').keyup(function() {
       bgColor = $('#colorpickerField1').val();
        if(bgColor.length ==3 || bgcolor.length == 6) {
            $('body').css("backgroundColor",'#'   bgColor);
        }
    });
});

Ответ №5:

Вам необходимо получить .val() значение поля внутри .keyup() обработчика, так как значение всегда будет меняться каждый раз, когда пользователь нажимает клавишу.

Измените свой javascript на:

 $(function() {
    var bgColor = $('#colorpickerField1').val();   
    $('body').css("backgroundColor",'#'   bgColor);

    $('#colorpickerField1').keyup(function() {       
       $('body').css("background-color",'#'   $(this).val());
    });
});

Обновленный jsFiddle: http://jsfiddle.net/Tnc8p/1 /