Question

这听起来很简单，但不知何故它不起作用。

我有一个模板页面，应该使用长轮询进行更新。我有长轮询工作，但我在处理/插入数据时失败。

这是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');
});

此外，我想在我的样式表中使用颜色，但我无法弄清楚如何替换非 div ed元素：

#color {
    color: #880000
}

我认为每个数组迭代来自教科书。我错过了什么？（jfsiddle example here）

第二次尝试基于建议的内容，现在更大的图片会出现类型错误：

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元素。）

Answer 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
});

Answer 2

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

我将其更改为一个数组，以便它可以预先覆盖，用方括号[]

表示

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);
});

在jQuery中使用数组来填充页面

2 个答案: