我已经在JS中动态创建了一个列表,并提供了添加/删除项目的功能。 如果我从列表末尾删除项目,则后续的“添加”工作正常。 但是,如果删除其中的一个项目(不是最后一个元素),则看不到后续的“已添加”项目。 我不确定我对SlideUp,SlideDown的理解是否正确。 有人可以检查代码,让我知道我哪里错了。
function addNewInSection() {
var imgCntr;
var path;
var fpath;
var desc;
var secListData = '';
selectedImageList.push.apply(selectedImageList, localImageList);
localImageList = []; // After copying, reset local list
var section = removeSpecials($('#pa-section-list > .active').find('a').find('#section-name').text().trim());
var count = $('#pa-section-list-data').find('#' + section).find('.list-group').find('.list-group-item').length;
var id;
for (imgCntr = count; imgCntr < selectedImageList.length; imgCntr++) {
path = selectedImageList[imgCntr][0].trim();
fpath = selectedImageList[imgCntr][1];
desc = selectedImageList[imgCntr][2];
id = section + '-' + imgCntr;
secListData = '<div style="display: none;" id="' + id + '" class="list-group-item list-item-height clearfix">'
+ '<img height="50" src="' + path + '" data-fpath="' + fpath + '">'
+ '<label id="imgdesc">' + desc + '</label>'
+ '<button on`click="upListItem(\'' + id + '\')" class="btn btn-sm btn-info pull-right"><span class="fa fa-arrow-up"></span></button>'
+ '<button onclick="downListItem(\'' + id + '\')" class="btn btn-sm btn-info pull-right"><span class="fa fa-arrow-down"></span></button>'
+ '<button onclick="deleteListItem(\'' + id + '\', \'' + imgCntr + '\')" class="btn btn-sm btn-warning pull-right"><span class="fa fa-trash"></span></button>'
+ '<button onclick="addImageDescription(\'' + imgCntr + '\');" class="btn btn-sm btn-info pull-right"><span class="fa fa-edit"></span></button>'
+ '</div>';
$('#pa-section-list-data').find('#' + section).find('.list-group').append(secListData);
$('#' + id).slideDown();
count = $('#pa-section-list-data').find('#' + section).find('.list-group').find('.list-group-item').length;
}
recordSections(); // Send to server
}
function deleteListItem(id, imgcnt) {
bootbox.confirm("Do you really want to delete?", function (result) {
if (result) {
$('#' + id).slideUp("slow", function () {
selectedImageList.splice(imgcnt, 1);
$('#' + id).remove();
recordSections();
});
}
});
}
答案 0 :(得分:0)
我认为这是因为您的脚本可能会生成相同的ID,而jQuery的ID选择器只能选择找到的第一个ID。
您不必将Id用作对象选择器,而是使用this
参数作为参考。
您可以更改此行:
secListData = '<div style="display: none;" id="' + id + '" class="list-group-item list-item-height clearfix">'
+ '<img height="50" src="' + path + '" data-fpath="' + fpath + '">'
+ '<label id="imgdesc">' + desc + '</label>'
+ '<button on`click="upListItem(\'' + id + '\')" class="btn btn-sm btn-info pull-right"><span class="fa fa-arrow-up"></span></button>'
+ '<button onclick="downListItem(\'' + id + '\')" class="btn btn-sm btn-info pull-right"><span class="fa fa-arrow-down"></span></button>'
+ '<button onclick="deleteListItem(\'' + id + '\', \'' + imgCntr + '\')" class="btn btn-sm btn-warning pull-right"><span class="fa fa-trash"></span></button>'
+ '<button onclick="addImageDescription(\'' + imgCntr + '\');" class="btn btn-sm btn-info pull-right"><span class="fa fa-edit"></span></button>'
+ '</div>';
$('#pa-section-list-data').find('#' + section).find('.list-group').append(secListData);
$('#' + id).slideDown();
进入这个:
// create element from jQuery
secListData = $('<div style="display: none;" class="list-group-item list-item-height clearfix">'
+ '<img height="50" src="' + path + '" data-fpath="' + fpath + '">'
+ '<label id="imgdesc">' + desc + '</label>'
+ '<button on`click="upListItem(this)" class="btn btn-sm btn-info pull-right"><span class="fa fa-arrow-up"></span></button>'
+ '<button onclick="downListItem(this)" class="btn btn-sm btn-info pull-right"><span class="fa fa-arrow-down"></span></button>'
+ '<button onclick="deleteListItem(this)" class="btn btn-sm btn-warning pull-right"><span class="fa fa-trash"></span></button>'
+ '<button onclick="addImageDescription(this);" class="btn btn-sm btn-info pull-right"><span class="fa fa-edit"></span></button>'
+ '</div>');
$('#pa-section-list-data').find('#' + section).find('.list-group').append(secListData);
// you can still access the object like this without id
secListData.slideDown();
,然后将您的删除功能更改为:
function deleteListItem(elm) {
// get parent element
var parentElm = $(elm).closest('.list-group-item');
bootbox.confirm("Do you really want to delete?", function (result) {
if (result) {
parentElm.slideUp("slow", function () {
parentElm.remove();
// do other things here
});
}
});
}
希望这会有所帮助