1

これはやや疑似コードなので編集してください。ユーザーがDIV内の親指をクリックすると、#placeholderDIVthumb2内に表示されます#imageLoad。注:Thumbとthumb2は JSON アイテムです。getJSON多くの人が、これは非同期リクエストであるため、これを行うことはできないと言っています。その場合、リクエストをサポートするようにスクリプトを変更するにはどうすればよいですか? 私が間違った方向に進んでいる場合は、別の解決策を提供してください。

$.getJSON('jsonFile.json', function (data) {
    var image1 = "<ul>";
    for (var i in data.items) {
        image1 += "<li><img src=images/items/" + data.items[i].thumb + ".jpg></li>";
    }
    image1 += "</ul>";
    document.getElementById("placeholder").innerHTML = output;

    var image2 = "<img src=images/items/" + data.items[i].thumb2 + ".jpg>";
    $('li').click(function () {
        document.getElementById("imageLoad").innerHTML = output;
    });
});

以下は外部 JSON ファイル (jsonFile.json) です。

{"items":[
    {
        "id":"1",
        "thumb":"01_sm",
        "thumb2":"01_md"
    },
    {
        "id":"2",
        "thumb":"02_sm",
        "thumb2":"02_md"
    }
]}
4

2 に答える 2

0

これでうまくいくと思います：

var $placeholder = $('#placeholder'),
    $imageLoad = $('#imageLoad');

$.getJSON('jsonFile.json', function(data) {
    var html = '<ul>';

    $.each(data.items, function(i,item){
        html += '<li><img src=images/items/' + item.thumb + '.jpg></li>';
    });        
    html += '</ul>';

    $placeholder.html(html);
});

$placeholder.on('click','li',function(){    
    $imageLoad.html($(this).html());
});

outputとにかく宣言していないので、の使用を理解できません。イベントのイベントハンドラは、ofを持つ DOM オブジェクトを含む のclick現在および将来のすべてのli要素でトリガーされます。$placeholderidplaceholder

于 2012-12-12T12:41:45.900 に答える
0

次のようなことを試すことができます。

$.getJSON('jsonFile.json', function(data)
{
  $("#placeholder").html("");
  var ul = $('<ul></ul>');
  $('#placeholder').append(ul);
  var load = $("#imageLoad");

  for(var i in data.items)
  {
    var li = $('<li></li>');
    ul.append(li);
    var img = $('<img>');
    img.attr("src", "images/items/" + data.items[i].thumb + ".jpg");
    img.click((function(x)
    {
      return function()
      {
        load.html("<img src=images/items/" + data.items[x].thumb2 + ".jpg>");
      }
    })(i));
    li.append(img);
  }
});

主な違いは、クリック ハンドラーがループ内で割り当てられるため、すべてのハンドラーが、thumb2 への適切な参照を含むクロージャーを受け取ることです。

于 2012-12-12T13:10:41.357 に答える