Question

当您添加项目以列出列表底部的项目时，尝试从我的数组中获取我的列表，以便在页面加载anad时显示。目前，我的脚本在您单击提交按钮时会再次编写enitre数组。看看我的小提琴，听我说的话。请任何帮助都会很棒：）

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功能中，只需清空list，然后再添加新值。

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

Answer 2

也许你正在寻找更像这样的东西

function myFruit() {
    var fruits = ['apple', 'bannanna', 'rasberry', 'watermelon', 'grape', 'orange'];

    function addFruit(fruit, $list) {
        $list || ($list = $('ul.fruit'));
        $list.append('<li>' + fruit + '</li>');
    }

    function addAllFruit() {
        var $list = $('ul.fruit');
        for (var i = 0; i < fruits.length; i++) {
            addFruit(fruits[i], $list);
        }
    }

    addAllFruit(); // generate the list of hardcoded fruit

    // add handler for user defined fruit
    $('#addFruit').on('click', function (e) {
        e.preventDefault();
        var newFruit = $('#fruitAdd').val();
        if (!newFruit) {
            console.warn('No fruit given');
        } else if (fruits.indexOf(newFruit) !== -1) {
            console.warn('Fruit already exists');
        } else {
            fruits.push(newFruit);
            addFruit(newFruit);
        }
    });
}
myFruit();

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

2 个答案: