Question

我正在使用jQuery使用JSON创建一系列不同的啤酒类型。我怎么能这样做，当用户点击其中一个li时，它会复制到一个单独的div中？仅供参考：我对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

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/

希望它有所帮助！

如何使用JSON创建链接，单击时，它会显示在单独的<div>？</div>中

2 个答案: