Я использую 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>");
});
Что я здесь делаю неправильно? Я могу получить список, который будет отображаться, без проблем, но нажатие не похоже на что-либо.
Проверьте этот код:
//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/
Надеюсь, поможет!
Я думаю, это должно быть:
$('#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()
.
floatInfo = ..+this.beerType+..
, но в этом контексте this
HTML-тег.
floatInfo
, но он все еще не работает (не могу поверить, что я пропустил его в первую очередь).