Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > изменять цвет кнопки и значение формы.

Автор: lvovitch 7.8.2013, 11:23

Помогите, пожалуйста, решить задачу:

скажу сразу - я в ява-скриптах новичек.

В общем задача такая: на странице есть 12 форм - <form></form>. в каждой форме есть пооле "text" и кнопка "submit".

я на этой странице получаю json сообщение от php файла. вида
{"2":"0", "3":"255", "4":"255", "5":"0", и так до "14":"255"}

мне нужно в зависимости от того какое значение у ключа придет (255 или 0) поменять цвет кнопки "submit" и значение "value" у текстового поля.
При этом получаю я данные json раз в секунду.

На просторах интернета я нашел наиболее близкий мне код:

Код


<html>
<head>
    <script src="jquery.js"></script>
</head>
<body>
    <div id="info">Загрузка...</div>
    <script>
        function json_example()
        {
            $.getJSON('json.php', function(data) {
                s  = "";
                $.each(data, function(key, val) {
                    s = s + key+' => ' + val + '<br/>'
                });
                $("#info").html(s);
            });
        }
        setInterval(json_example, 1000);
    </script>
</body>
</html>

но он только в div выводит полученные данные. Как мне их интерпретировать в цвет и значение?

Ну вот что-то вроди как на php:

Код



if($jason[2] == 255) {
echo '<form><input type="text" name="T1" size="20" value="333"><input type="submit" value="Отправить" name="B1" style="width: 200; background-color: #FFFF00"></form>';
}else{
echo '<form><input type="text" name="T1" size="20" value="444"><input type="submit" value="Отправить" name="B1" style="width: 200; background-color: #000000"></form>';}

только на в ява-скрипте?

Автор: Sanchezzz 9.8.2013, 13:55

Если ключ в JSON это имя формы например T1 T2 T3 то примерно так, если я вас верно понял.

Код


$.getJSON('/json.php', function(data) {

$.each(data, function(key, val) {
     var btn =  $('form[name="T'+key+'"] input[type="submit"]');
     if(btn.length > 0 ){
         btn.css('background-color' ,  (val == 255 ?'#FFFF00':'#000000')  ) ;   
     }
});

})