0

とてもシンプルに聞こえますが、どういうわけかうまくいきません。

ロング ポーリングを使用して更新する必要があるテンプレート ページがあります。ロングポーリングは機能していますが、データの処理/挿入に失敗しています。

これは HTML 部分です。

<p><b><div id="weather">weather here</div></b></p>
<p><div id="temperature">temperature here</div></p>
<p><i><div id="color">color here</div></i></p>

これはスクリプトです：

var obj = {
    "color": "#880000",
        "temperature": "hot",
        "weather": "cloudy"
};

$.each(obj function (key,value) {
    ('#key').html('value');
});

さらに、スタイル シートで色を使用したいのですが、分割されていない要素を置き換える方法がわかりません。

#color {
    color: #880000
}

各配列の反復は教科書からのものだと思いました。私は何が欠けていますか？( jfsiddle の例はこちら)

提案された内容に基づいた2 回目の試みであり、型エラーを発生させる全体像:

php ファイル (array_2.php):

<?php
/*
Values get read from files.
Here, in the example, we simply populate variables.

Original: 
$color = file_get_contents('/path/to/txt/file/with/value');
*/ 
$color = "#880000";
$temperature = "hot";
$weather = "cloudy";
$items = array(array(id => 'weather', text => $weather), array(id => 'color', text => $color), array(id => 'temperature', text => $temperature),);  
echo json_encode($items);
?>

html/javascript:

<html>
<head>
    <title>Satus Poller</title>
<script type="text/javascript" src="/jquery.js"></script>
<meta charset="utf-8">
    <script type="text/javascript" charset="utf-8">
       function addstatus(obj){
        $.each(obj, function (key,value) {
            $('#' + value.id).html(value.text);
        });
    };
    function waitForMsg(){
        $.ajax({
            type: "GET",
            url: "array_2.php",
            async: true,
            cache: false,
            timeout:50000,

            success: function(data){
                var arr = $.parseJSON(data);
                var obj = arr + ""; /* This doesn't help */
                addstatus(obj);
                setTimeout(
                    waitForMsg,
                    1000
                );
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                addmsg("error", textStatus + " (" + errorThrown + ")");
                setTimeout(
                    waitForMsg,
                    15000);
            }
        });
    };

    $(document).ready(function(){
        waitForMsg();
    });
    </script>
</head>
<body>
    <p><div id="color">color</div></p>
    <p><div id="temperature">temperature</div></p>
    <p><div id="weather">weather</div></p>
</body>
</html>

(テキストと CSS 要素を同時に置換しようとさえ試みたことはありません。)

4

2 に答える 2

1

OP のアプローチは正しかったのですが、いくつかのタイプミスがありました。

var obj = {
  "color": "#880000",
  "temperature": "hot",
  "weather": "cloudy"
};

// missing $, or jQuery
$.each(obj, function (key,value) {
  // missing comma

  $('#'+key).html(value);
  // variable key and value wrapped inside quote
});
于 2013-03-12T23:05:06.847 に答える
0

http://jsfiddle.net/SKssF/151/

これを配列に変更して、角括弧 [] で示されている foreach を実行できるようにしました。

var obj = [
    {id:"color", text:"#880000"},
    {id:"temperature", text:"hot"},
    {id:"weather", text: "cloudy"}
];

の横にコンマがobj, functionなく、jquery セレクターがありませんでした$。 '#key'は単なる文字列であり、javascript は変数の意味を認識していませんでした:

$.each(obj, function (key,value) {
    $('#' + value.id).html(value.text);
});
于 2013-03-12T23:05:57.020 に答える