Я показываю список элементов JSON в DIV. Как я могу повторно отобразить конкретный элемент во 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
}
}
]}
Вы испортили цитаты:
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);
});
i
, но вы делаете это вне цикла, где i
всегда буду последним итерированным значением.
document.getElementById("placeholder2").innerHTML=" + data.items[i].title + ";