一个好的JavaScript来添加/ /数组删除项目？ [英] A good JavaScript to add/remove items from/to array?

问题描述

乡亲！今天，我创造了这个剧本，它具有以下功能：

• 添加新项目阵列


• 列表从阵列中的所有项目


• 从阵列中删除项目

有两个功能：

• addToFood（） - 输入的值添加到阵列和更新
  DIV的innerHTML的


• removeRecord（ⅰ） - 从阵列和更新删除记录
  DIV的innerHTML的

在code包括3 for循环，你可以在看到它 - 的http：//的jsfiddle .NET / menian / 3b4qp / 1 /

我的主人告诉我，那些3循环使溶液的方式沉重。有没有更好的方式做同样的事情？它是更好地降低循环，并尝试使用拼接？先谢谢了。

HTML

 ＆LT;！ - 我们从下面的输入值添加到我们的foodList  - ＆GT;
＆LT;输入类型=文本值=食物ID =addFood/＆GT;＆LT;！ - 我们称之为addToFood（）;通过以下按钮 - ＆GT;
＆LT;输入类型=提交值的onClick = =更多的食品中添加，addToFood（）;＆GT;＆所述;！ - 被显示在下面的div食品的列表 - ＆GT;
＆LT; D​​IV ID =食物＆GT;＆LT; / DIV＆GT;
 

的JavaScript

  VAR foodList = [];功能addToFood（）{
    。VAR addFood =的document.getElementById（'addFood'）值;
    foodList.push（addFood）;    对于（i = 0; I＆LT; foodList.length;我++）{
        变种newFood =下; A HREF =＃的onClick ='removeRecord（+ I +）;'＆X的催化剂＆下; / A＆gt;中+ foodList [I] +＆所述峰; br＆gt;中;
    };
    的document.getElementById（'食品'）的innerHTML + = newFood。
}
功能removeRecord（ⅰ）{    //定义变量j等于我们从removeRecord得到了数
    变种J =;    //定义和创建一个新的临时数组
    变种tempList = [];    //空newFood
    //在函数结束时，我们填充它与新内容
    变种newFood =;
    对于（VAR I = 0; I＆LT; foodList.length;我++）{
        如果（我！= j）条{    //我们添加的所有记录，除了一==到j到新数组
    //记录eual到j是我们点击的X之一删除
            tempList.push（foodList [I]）;
        }
    };    //通过使其等于tempList阵列做出重新定义foodList
    //它应该是一个小纪录
    foodList = tempList;    //重新显示来自foodList记录我们做到了在addToFood以同样的方式（）
    对于（VAR I = 0; I＆LT; foodList.length;我++）{
        newFood + =＆下; A HREF =＃的onClick ='removeRecord（+ I +）;'＆X的催化剂＆下; / A＆gt;中+ foodList [I] +＆所述峰; br＆gt;中;
    };
    的document.getElementById（'食品'）的innerHTML = newFood。
}
 

解决方案

您应该使用方法Array.splice（位置，nbItems）

 函数removeRecord（我）{
    foodList.splice（I，1）; //在位置删除元素i
    变种newFood =;
    对于（VAR I = 0; I＆LT; foodList.length;我++）{
        newFood + =＆下; A HREF =＃的onClick ='removeRecord（+ I +）;'＆X的催化剂＆下; / A＆gt;中
            + foodList [I] +＆LT; BR＆gt;中;
    };
    的document.getElementById（'食品'）的innerHTML = newFood。
}
 

http://jsfiddle.net/3b4qp/5/

现在使用JQuery：

  $（函数（）{
    $（文件）。在（'点击'，'输入[类型=提交]'，函数（）{
        $（'＃食品）
           .append（'＆所述; DIV＆GT;＆下; A HREF =＃类=项＆X的催化剂＆下; / A＆GT;'
                + $（'＃addFood）VAL（）+'＆LT; / DIV＆GT;'）;
    }）;    $（文件）。在（'点击'，'项目'，函数（）{
        $（本）.parent（）remove（）方法。
    }）;
}）;
 

http://jsfiddle.net/jfWa3/

folks! Today I created this script that has the following functionality:

• add new items to array
• list all items from the array
• remove an item from the array

There are two functions:

• addToFood() - adds the value of input to the array and updates innerHTML of div
• removeRecord(i) - remove a record from the array and updates innerHTML of div

The code includes 3 for loops and you can see it at - http://jsfiddle.net/menian/3b4qp/1/

My Master told me that those 3 for loops make the solution way to heavy. Is there a better way to do the same thing? Is it better to decrease the loops and try to use splice? Thanks in advance.

HTML

<!-- we add to our foodList from the value of the following input -->    
<input type="text" value="food" id="addFood" />

<!-- we call addToFood(); through the following button  -->    
<input type="submit" value="Add more to food" onClick="addToFood();">

<!-- The list of food is displayed in the following div -->    
<div id="foods"></div>

JavaScript

var foodList = [];

function addToFood () {
    var addFood = document.getElementById('addFood').value;
    foodList.push(addFood);

    for (i = 0; i < foodList.length; i++)   {
        var newFood = "<a href='#' onClick='removeRecord(" + i + ");'>X</a> " + foodList[i] + " <br>";
    };
    document.getElementById('foods').innerHTML += newFood;
}


function removeRecord (i) {

    // define variable j with equal to the number we got from removeRecord
    var j = i;

    // define and create a new temporary array
    var tempList = [];

    // empty newFood
    // at the end of the function we "refill" it with the new content
    var newFood = "";
    for (var i = 0; i < foodList.length; i++) {
        if(i != j) {

    // we add all records except the one == to j to the new array
    // the record eual to j is the one we've clicked on X to remove
            tempList.push(foodList[i]);
        } 
    };

    // make redefine foodList by making it equal to the tempList array
    // it should be smaller with one record
    foodList = tempList;

    // re-display the records from foodList the same way we did it in addToFood()
    for (var i = 0; i < foodList.length; i++) {
        newFood += "<a href='#' onClick='removeRecord(" + i + ");'>X</a> " + foodList[i] + " <br>";
    };
    document.getElementById('foods').innerHTML = newFood;
}

解决方案

You should use array.splice(position,nbItems)

function removeRecord (i) {
    foodList.splice(i, 1); // remove element at position i
    var newFood = "";
    for (var i = 0; i < foodList.length; i++) {
        newFood += "<a href='#' onClick='removeRecord(" + i + ");'>X</a> "
            + foodList[i] + " <br>";
    };
    document.getElementById('foods').innerHTML = newFood;
}

http://jsfiddle.net/3b4qp/5/

Now using JQuery:

$(function(){
    $(document).on('click','input[type=submit]',function(){
        $('#foods')
           .append('<div><a href="#" class="item">X</a> ' 
                + $('#addFood').val() + '</div>');
    });

    $(document).on('click','.item',function(){
        $(this).parent().remove();
    });
});

http://jsfiddle.net/jfWa3/

这篇关于一个好的JavaScript来添加/ /数组删除项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！