Question

我已经在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();
            });
        }
    });
}

Answer 1

我认为这是因为您的脚本可能会生成相同的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
            });
        }
    });
}

希望这会有所帮助

JS SlideUp和SlideDown在列表中不起作用

1 个答案: