Question

我正在尝试使用Jquery创建一个简单的待办事项应用程序。但是，当我点击添加按钮时尝试显示当前值似乎会产生异常，即单击添加按钮时将显示所有数组项。我在下面包括了我的代码片段。我遵循了在这里看到的步骤http://api.jquery.com/jquery.each/

var inputVal = $('#formField').val()
var todoList = $('#todolist');


var todos = [];
function createTodo(item){
// Return a todo object
}

function removeTodo(index){
    // Remove todo from todos at index
}

function addTodo(todo){
//Add todo to todos

todos.unshift($('#formField').val())
}

function renderTodos(){
    $.each(todos, function( index, value ) {
        $('.todolist').prepend(`<li> ${value}<span class delete> X </span> </li>`);
      });
}

$('#subBut').click(function (e) { 
    
    addTodo(inputVal);
    renderTodos()
    
});

.center {
    margin: auto;
    width: 50%;
    text-align: center;
    padding: 10px;
  }

  ol {
    width: 70%;
    margin: auto;
    padding: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDo App</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/styles/main.css">
</head>
<body>
    <div class="center">
        <h2>My Todo App</h2>
        <div id="taskForm">
            <input type="text" placeholder="Enter a task" id="formField">
            <input type="button" id="subBut" value="Add">
        </div>
       
    </div>
  
    <div id="result">
            <ol class="todolist">
                
            </ol>
        </div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="/script/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

.todolist已包含一些项目，并且您尝试再次在所有项目之前添加，这就是为什么您要重复的原因。您可以先使用.todolist清除.empty()，然后再重新添加

Answer 2

只需在新输入之前添加，就不需要$.each。

var inputVal = "";
var todoList = $('#todolist');


var todos = [];
function createTodo(item){
// Return a todo object
}

function removeTodo(index){
    // Remove todo from todos at index
}

function addTodo(todo){
//Add todo to todos

    todos.unshift(inputVal);
}

function renderTodos(){
    $('.todolist').prepend(`<li> ${inputVal}<span class delete> X </span> </li>`);
    
}

$('#subBut').click(function (e) { 
    inputVal = $('#formField').val();
    addTodo(inputVal);
    renderTodos();
    
});

.center {
    margin: auto;
    width: 50%;
    text-align: center;
    padding: 10px;
  }

  ol {
    width: 70%;
    margin: auto;
    padding: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDo App</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/styles/main.css">
</head>
<body>
    <div class="center">
        <h2>My Todo App</h2>
        <div id="taskForm">
            <input type="text" placeholder="Enter a task" id="formField">
            <input type="button" id="subBut" value="Add">
        </div>
       
    </div>
  
    <div id="result">
            <ol class="todolist">
                
            </ol>
        </div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="/script/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

Answer 3

这似乎是each()的预期行为。遍历数组的每个项目。然后，将所有项目放在列表的前面。每次整个列表。

因此，您可以在重新添加列表之前先从列表中删除元素，也可以仅添加新项。希望这会有所帮助！

无法使用$ .each（）迭代器函数从数组中获取当前值

3 个答案: