javascript - 如何使用 JSON 创建链接，单击该链接时将显示在单独的?

Question

我正在使用 jQuery 使用 JSON 创建 ul 的不同啤酒类型。我怎样才能使当用户单击其中一个 li 时，它会复制到一个单独的 div 中？仅供参考：我对 jQuery 很陌生，但对 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 链接

Answer 1

我想应该是：

$('#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()

Answer 2

检查此代码：

//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/

希望能帮助到你！