我在Javascript中使用这个循环:
$.get('showplaylist.php', {playlist: "inbox"}, function(data){
for (var i = 0; i < data.length + 1; i++)
{
var key = i;
var id = data[key]['id'];
var youtubeid = data[key]['youtube_id'];
videoThumb(id, youtubeid);
}
}, "json");
});
我循环的函数解压缩id和youtubeid并为每一行添加html输出。 e.g。
function videoThumb(id, youtubeid)
$('#videos').append(
"<ul id=\"sortable\">" +
"<li id='item_" + id + "' class=\"ui-state-default\">" +
"<div class=\"thumb\" id=\"" + id + "\">" +
"<img src=\"http://i3.ytimg.com/vi/" + youtubeid + "/default.jpg\">" +
"</div>" +
"</li>" +
"</ul>"
);
}
}
问题是“可排序”元素。我正在使用JQuery UI可排序插件。当我使用PHP生成html(不使用Javascript)时,可排序插件可以正常工作。通过上面的函数生成html意味着它没有。
可排序插件的定义如下:
<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: 'ui-state-highlight',
stop: function(i) {
placeholder: 'ui-state-highlight'
$.ajax({
type: "GET",
url: "updatedb.php",
data: $("#sortable").sortable("serialize")});
}
});
$( "#sortable" ).disableSelection();
});
</script>
任何关于如何修复的想法都将受到赞赏。
答案 0 :(得分:2)
您的id
不正确。所有附加元素都具有相同的ID:
$('#videos').append(
"<ul id=\"sortable\">"
或者您只是追加错误的元素。我认为,代码应该是:
$('#sortable').append(
"<li id='item_" + id + "' class=\"ui-state-default\">" +
"<div class=\"thumb\" id=\"" + id + "\">" +
"<img src=\"http://i3.ytimg.com/vi/" + youtubeid + "/default.jpg\">" +
"</div>" +
"</li>"
);
您的代码提供了错误的html结构:
<!-- video 1-->
<ul id='sortable'>
<li><img/></li>
</ul>
<!-- video 2-->
<ul id='sortable'>
<li><img/></li>
</ul>
但是正确的HTML应该是这样的:
<ul id='sortable'>
<!-- video 1-->
<li><img/></li>
<!-- video 1-->
<li><img/></li>
</ul>