-3

DIV に JSON アイテムのリストを表示しています。ホバーしたときに特定の項目を 2 番目の DIV に再表示するにはどうすればよいですか。

現在、スクリプトは実際に値を表示する代わりに、" + data.items[i].title + " verbatim を出力します。

以下のスクリプトで何を変更できますか? 前もって感謝します。

注：これは、画像ではなくテキストを扱うため、以前の質問とは異なります。

$.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 に答える