javascript - 将一项添加到数组中，而不是使用 javascript 重新列出整个数组

Question

尝试从我的数组中获取我的列表，以便在页面加载时显示，并且当您添加一个项目以在列表底部列出该项目时。目前，当您单击提交按钮时，我的脚本会再次写入 enitre 数组。查看我的 fiddle 以了解我在说什么。请任何帮助都会很棒:)

http://jsfiddle.net/trav5567/2ebothpb/

function myFruit() {
    var Fruit = ['apple', 'bannanna', 'rasberry', 'watermelon', 'grape', 'orange'];
    $('#addFruit').on('click', function(e) {
        e.preventDefault();
        var flag = true;
        var val = $('#fruitAdd').val();
        for (var i = 0; i < Fruit.length; i++) {
            if (Fruit[i] == val) {
                flag = false;
                console.log('already entered this item');
            }
        }
        if (flag)
            Fruit.push(val);
        loopArray();
    });

    function loopArray() {
        var fruitList = $('ul.fruit');
        var arrayContainer = $('.arrayContainer');
        for (var i = 0; i < Fruit.length; i++) {
            fruitList.append('<li>' + Fruit[i] + '</li>');
        }
    }
}
myFruit();

Answer 1

在您的 loopArray 函数中，只需在添加新值之前清空您的列表即可。

function loopArray() {
        var fruitList = $('ul.fruit');
        $(fruitList).empty();// this line added
        var arrayContainer = $('.arrayContainer');
        for (var i = 0; i < Fruit.length; i++) {
            fruitList.append('<li>' + Fruit[i] + '</li>');
        }
    }

如果您想要一个空的li，则应该对该行使用以下内容。

$(fruitList).html('<li></li>')

DEMO