Question

我正在尝试制作一个可以添加和删除<li>个元素的菜单栏。到目前为止这么好，但是当我尝试删除它们时，我遇到了问题。我玩了几个小时，现在我想知道整个过程是否可以变得更容易（也许是一个对象？）。

无论如何，这里是完整的代码（80行），并附有评论。

var tabs = $('.accountSelectNav');
var titles = [];
var listItems = [];
// when the page loads check if tabs need to be added to the ul (menu bar)
$(document).ready(function(e) {
    if ($.cookie('listItems') != null) {
        console.log('not null');
            //return "listItems" to it's array form.
        listItems = JSON.parse($.cookie('listItems'));
        $('.accountSelectNav').append(listItems);
    }
});

$('.selectTable td:first-child').on('click', function(e) {
    $('#home_select').removeClass('navHighlight');
    //grab the text value of this cell
    title = $(this).text();
    $.ajax({
        url:'core/functions/getAccountId.php',
        type: 'post',
        data: {'title' : title}
    }).fail (function() {
        alert('error');
    }).done(function(data) {
        accountId = $.trim(data);
        // store values in the cookie
        $.cookie('account_id', accountId, {expires : 7});
        $.cookie('title', title, {expires : 7});
        window.location = ('home_table.php');
    });

    // make sure the value is NOT currently in the array. Then add it 
    var found = jQuery.inArray(title, titles);
    if (found == -1) {
        titles.push(title);
        addTab();
    }

    // make sure the value is NOT currently in the array. Then add it
    found = jQuery.inArray(title, listItems);
    if (found == -1) {
        addListItem();
        //place <li>'s in cookie so they may be used on multiple pages
        $.cookie('listItems', JSON.stringify(listItems));
    };
});

$("body").on("click", ".deleteImage", function (e) {
    var removeTitle = $(this).closest('li').find('a').text();
    var removeItem = $(this).closest('li')[0].outerHTML;

    //remove title from "titles" array
    titles = jQuery.grep(titles, function (value) {
        return value != removeTitle;
    });
    //remove <li> from "listItems" array
    listItems = jQuery.grep(listItems, function (value) {
        return value != removeItem;
    });
    // this shows the <li> is still in the listItemsarray
    console.log(listItems); 
    // put the array back in the cookie
    $.cookie('listItems', JSON.stringify(listItems));
    removeTab(this);
});

$("body").on("mouseover", ".accountSelectNav li", function(e) {
    $(this).find('.deleteImage').show();
});

$("body").on("mouseleave", ".accountSelectNav li", function(e) {
    $(this).find('.deleteImage').hide();
});

function addTab() {
    tabs.append('<li class="navHighlight">' + '<a href="#">' + title + '</a>' + '<a href="#">' + '<img src="images/delete.png" class="deleteImage"/>' + '</a>' + '</li>');
};

function removeTab(del) {
    $(del).closest('li').remove();
}

function addListItem() {
    var s = ('<li class="navHighlight">' + '<a href="#">' + title + '</a>' + '<a href="#">' + '<img src="images/delete.png" class="deleteImage"/>' + '</a>' + '</li>');
    listItems.push(s);
}

所以你看我有两个相等长度的数组，它们应该总是相同的长度。一个存储要在选项卡中显示的标题，另一个存储<li>的html，它将附加到<ul>。从列表中删除标题没有问题。然而，从它的阵列中删除<li>正变得相当麻烦。你看到当我在{1}元素被充气后，内部的html 完全与放入的内容相匹配时，浏览器会添加样式元素。

示例，变量“removeItem”表示我想要删除的所选<li>的html值。它看起来像这样：

<li>

但我的数组“listItems”中的值如下所示：

<li class="navHighlight"><a href="#">Test1</a><a href="#"><img src="images/delete.png" class="deleteImage" style="display: inline;"></a></li>

所以我尝试从数组中删除它总是失败，因为它们不是完美的匹配。

现在我的问题是如何删除此<li class="navHighlight"><a href="#">Test1</a><a href="#"><img src="images/delete.png" class="deleteImage"/></a></li>项？还有一种更简单的方法来完成整个过程而我只是没有看到它吗？

感谢您的时间。

修改

按要求提问here

我可以解释它的最简单方法。

点击小提琴的链接。
单击“应用程序名称”列中的任何单元格这会在表格上方的<li>（菜单）中添加<li> 当您将鼠标悬停在<ul>上时，会出现一张图片点击图片
此应从<li>和数组listItems中删除<li>
现在它没有

Answer 1

在使这个更容易检查的过程中，我已经拿走了你的JSFiddle并做了以下事情：

删除了额外的console.log和评论
删除了与cookie的交互（因为我首先没有它们，我认为它们不仅仅是第一种情况）

在这样做之后，我达到了一个点（你可以看到here）所需的功能正常工作。

我甚至继续前进并删除了ajax的东西，因为那个警报让我发疯了。（here）

由于这种方法很好，我的猜测是你的问题出在我删除的行之间。

您对cookies的使用如下：

加载现有标签并重新添加
保存未再次使用的account_id和title
在添加新项目后保留listItems

然后我用你的小提琴版本打开了控制台，javascript的执行在$.cookie()停止，错误为undefined is not a function。

这清楚地表明，小提琴中存在的问题是jQuery.cookie不存在，因此这些调用正在停止执行其余的脚本。这也解释了为什么它在我拿出它时才开始工作。

我发布了我到达那里的整个过程，以指示我如何将问题减少到特定部分，这对减少问题空间很有用。当您失去选项并在丢失时到达某个地方时，使用较少的代码和您已识别的问题的特定部分发布问题会更容易。这将帮助您找到您所面临的问题，并帮助您为StackOverflow提供正确的答案。

希望它有所帮助！

Answer 2

这是我提出的解决方案。人们应该比我原来的帖子更容易理解。虽然这是一个很长的阅读，但它可能是值得的，特别是对于新的开发人员。

此代码的要点是从无序列表或<ul>中创建一个菜单栏。菜单栏需要在多个页面上使用。所以我将使用cookies。

我从这段代码开始，从我的表中获取文本值。：

$('.selectTable td:first-child').on('click', function(e) {
    // This value will be used later for the name of the tab or `<li>` inside our menu bar or `<ul>`
    title = $(this).text();
});

然后我将值放在一个数组中。如果数组中没有此字符串，我只执行。我不想要重复：

var found = jQuery.inArray(title, titles);
var titles = [];
if (found == -1) {
    titles.push(title);
}

然后我使用这样的library将数组存储到cookie中：

$.cookie('titles', JSON.stringify(titles));

现在当任何需要此菜单栏的页面加载时，我运行此代码来检查是否有任何值：

$(document).ready(function() {
    if ($.cookie('titles') != null) {
        titles = JSON.parse($.cookie('titles'));
    }
});

现在我需要遍历数组。当我遍历数组时，我必须做三件事：

1）抓取字符串值。
2）将html添加到我的新字符串中，使其成为列表项或<li> 3）将新创建的<li>附加到我们的<ul>。

像这样：

for(var i = 0; i < titles.length; i++) {
    var str = titles[i];
    var listItem = '<li class="navHighlight">' 
                    + '<a href="#">' 
                    + str 
                    + '</a>' 
                    + '<a href="#">' 
                    + '<img src="images/delete.png" class="deleteImage"/>' 
                    + '</a>' 
                    + '</li>';
    $('.accountSelectNav').append(listItem);
}

现在，如果我要删除此<li>，请点击我们<li>内的删除图片。你说什么删除图像？看看我再次添加的html。您会看到我在其中添加了<img>标记。

现在删除如下：

$("body").on("click", ".deleteImage", function (e) {
    // grabs the text value of my li, which I want to remove
    var removeTitle = $(this).closest('li').find('a').text();
    // runs through my titles array and returns an array without the value above
    titles = jQuery.grep(titles, function (value) {
        return value != removeTitle;
    });
});

然后我再次将新数组放入我的cookie中。像这样：

$.cookie('titles', JSON.stringify(titles));

最后我删除了这样的标签：

removeTab(this);

function removeTab(del) {
    $(del).closest('li').remove();
}

是的，我已经完成了。所以现在，如果有人有更优雅的方式来实现这一点，我正在倾听。我毫不怀疑有更好的方法，javascript / jQuery甚至都不是我的强项。

可以找到完整的代码here。

jQuery - 使用删除图像从数组中删除li

2 个答案: