Как создать ссылки с использованием JSON, которые при нажатии отображаются в отдельном элементе <div>?

0

Я использую jQuery для создания ul различных типов пива, используя JSON. Как я могу сделать так, что, когда пользователь нажимает на один из ли, он дублируется в отдельный div? FYI: Я новичок в jQuery, но знакомый w/HTML.

$(styles.types).each(function(){
    var output="<li><a class=move>" + this.beerType+"</a></li>";
    $('#styleList').append("<ul>"+output+"</ul>");
});

$('#styleList').on('click', ".move", function(){
    var floatInfo="<li>" + this.beerType+"</li>";
    $('#floater').append("<ul>"+floatInfo+"</ul>");
});

Что я здесь делаю неправильно? Я могу получить список, который будет отображаться, без проблем, но нажатие не похоже на что-либо.

JSFiddle Link

Теги:

2 ответа

0
Лучший ответ

Проверьте этот код:

//Put JSON on DIV
var output = "";
$(styles.types).each(function(){
    output += "<li><a class='move'>" + this.beerType+"</a></li>";
});
$('#styleList').append("<ul>"+output+"</ul)>");

//Click event
$('#styleList').on('click', ".move", function(){
    $('#floater').append("<ul><li>"+$(this).html()+"</li></ul>");
});

Рабочий JSFidlle: http://jsfiddle.net/Z5dEC/

Надеюсь, поможет!

Поделиться
  • 0
    Любая версия этого, которая не использует getJSON? Я пытаюсь проверить в JSFiddle и JSFiddle не позволяет внешний JSON.
  • 0
    Извините, я не смотрю JSFiddle !!! подожди меня минутку
Показать ещё 4 комментария
3

Я думаю, это должно быть:

$('#styleList').on('click', ".move", function(){
    var floatInfo=...
    $('#floater').append("<ul>"+floatInfo+"</ul>"); // <--- floatInfo, not output; output is undefined here
});

Смотрите скрипку: http://jsfiddle.net/8aLrf/

Вы должны изменить $("#floater") на $(".floater") и this.beerType на $(this).text().

Поделиться
  • 0
    В вопросе floatInfo = ..+this.beerType+.. , но в этом контексте this HTML-тег.
  • 0
    @nikos, я изменил его на floatInfo , но он все еще не работает (не могу поверить, что я пропустил его в первую очередь).
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню