-3

我在 DIV 中显示 JSON 项目的列表。将鼠标悬停在第二个 DIV 上时，如何重新显示特定项目。

现在，脚本会逐字打印：" + data.items[i].title + "，而不是实际显示值。

可以在下面的脚本中更改什么？提前致谢。

注意：这是一个与我之前的问题不同的问题，因为它处理的是文本，而不是图像。

$.getJSON('1zONE.json', function(data) {
    globalData = data;
    var output="<ul>";
    for (var i in data.items) {
        output += "<li><h1>" + data.items[i].title + "</h1>" + data.items[i].price + "--" + data.items[i].description.one+"</li>";
    }
    output += "</ul>";
    $("#placeholder").html(output);


    $('li').on({
        mouseenter: function() {
        document.getElementById("placeholder2").innerHTML=" + data.items[i].title + ";

        }
    });   
});

这是 JSON 文件 (1zONE.json)：

{"items":[
        {
            "id":"1",
            "thumb":"01_sm",
            "thumb2":"01_md",
            "title":"Ray",
            "price":"Villalobos",
            "description": {
                "one":"January",
                "two":12,
                "three":2012
            }
        },
        {
            "id":"2",
            "thumb":"02_sm",
            "thumb2":"02_md",
            "title":"John",
            "price":"Jones",
            "description": {
                "one":"April",
                "two":28,
                "three":2010
            }
        },
        {
            "id":"3",
            "thumb":"03_sm",
            "thumb3":"03_md",
            "title":"Jo",
            "price":"Jo",
            "description": {
                "one":"May",
                "two":8,
                "three":2010
            }
        },
        {
            "id":"4",
            "thumb":"04_sm",
            "thumb3":"04_md",
            "title":"Jo4",
            "price":"Jo4",
            "description": {
                "one":"May4",
                "two":84,
                "three":20104
            }
        }
]}
4

1 回答 1

1

你搞砸了引号，这个：

document.getElementById("placeholder2").innerHTML=" + data.items[i].title + ";

应该是这样的：

document.getElementById("placeholder2").innerHTML = data.items[i].title;

并且由于它在 jQuery 事件处理程序中，它可能会更容易做到：

$("#placeholder2").html(data.items[i].title);

编辑：

要解决迭代值不持久的问题，您需要一个闭包，所以我想我会为您编写它？

$.getJSON('1zONE.json', function(data) {
    globalData = data;
    var ul = $('<ul />');

    for (var key in data.items) {
        (function(j) {
            var li = $('<li />'),
                h1 = $('<h1 />', {text: data.items[j].title});

            li.append(h1).append(data.items[j].price + "--" + data.items[j].description.one).on('mouseenter', function() {
                $('#placeholder2').html(data.items[j].title);
            }).appendTo(ul);
        })(key);
    }
    $("#placeholder").html(ul);
});​
于 2012-12-12T20:02:06.013 回答