jQuery-通过按钮值传递变量

我正在尝试在我的应用程序上创建一个表单，允许用户输入名称和地址。一旦用户输入了信息，我需要验证并将其添加到一个数组中，以提交给php函数。在提交之前，我想允许用户删除和编辑他们提交的内容

现在我可以将数据添加到数组中，但是我很难删除数组中的一个元素。如何将按钮值指定为数组的索引值。我知道

$（'#Delete'）.val（I）在for循环的每次迭代中都被重新分配，但我不确定还能做什么

而且，我肯定还是一个JavaScript新手。如果你看到一个更好的方法来做到这一点，这是最有可能的，请让我知道


$（文档）.ready（函数（）{
var ItemArray=[]；//初始化数组
$（“按钮”）。单击（函数（）{
$（“#结果”）.empty（）；//清除结果div
//将表单数据添加到数组中
ItemArray.push({
FirstName:$（'#FirstName'）.val（），
LastName:$（'#LastName'）.val（），
});
//遍历数组以显示数组值
对于（i=0；i”；//显示名字和姓氏
$（“#结果”）.append（'Delete
'）；//添加删除按钮
$（'#Delete'）.val（i）；//设置删除按钮值
}
});
//删除
$（“#结果”）。在（“单击”，“删除”，函数（）上）{
//从数组中删除所选索引
拼接（$（'#Delete'）.val（），1）；
//净空div
$（“#结果”）。空；
//遍历数组以显示数组值
对于（i=0；i”；//显示名字和姓氏
$（“#结果”）.append（'Delete
'）；//添加删除按钮
$（'#Delete'）.val（i）；//设置删除按钮值
}
});
});

名字：

姓氏：


提交
为每个名称和按钮组合放置一个包装器怎么样？您不必在JS中维护数组，只需将所有模式存储在DOM中，并在需要时从中读取即可。像这样：

 $('#submit').on('click',function(){
     var record = "<div class='record'>" +
                       "<span class='name'>....</span><button class='delete'>delete</div>" + 
                  "</div>";

    $('#result').append(record);


 })//adding name&button

 $('.delete').on('click',function(){
     var $this = $(this);
     $this.closest('.record').remove();
 })// delete a record.


function getArray(){

  var ItemArray;
  $.each($('.record'),function(index,record){
      ItemArray.push(.....)


   })
  return ItemArray;
}//read from DOM

$（'#提交'）。在（'click'，function（）上{
var record=“”+
“…删除”+
"";
$（“#结果”）。追加（记录）；
})//添加名称和按钮
$（'.delete'）。在（'click'，function（）上{
var$this=$（this）；
$this.closest（'.record'）.remove（）；
})//删除记录。
函数getArray（）{
var项数组；
$.each（$（'.record'），函数（索引，记录）{
ItemArray.push（…）
})
返回项数组；
}//从DOM读取

包装要附加在
div
元素中的HTML，以便更容易查找/删除
div
元素

在每个
添加/删除
操作上迭代
itemrarray
数组是没有意义的

使用
.delete
而不是
#delete
（id），因为不应该有多个元素具有相同的id属性值

使用
数据索引
属性获取当前单击元素的
索引

试试这个：


$（文档）.ready（函数（）{
var ItemArray=[]；
$（“#提交”）。单击（函数（）{
ItemArray.push({
FirstName:$（'#FirstName'）.val（），
LastName:$（'#LastName'）.val（），
});
$（“#results”）.append（'+$（'#FirstName'）.val（）+'+$（'#LastName'）.val（）+'+'
删除
'）；
});
$（“#结果”）。在（“单击”，“删除”，函数（）上）{
ItemArray.splice（$（this.data（'index'），1）；
$（this）.closest（'div'）.remove（）；
});
});

名字：

姓氏：


提交

采取新的方法，像这样尝试。我使用了
对象
而不是
数组


$（文档）.ready（函数（）{
var-itemsObj；
$（“按钮”）。单击（函数（）{
$（“#结果”）.empty（）；
itemsObj={
FirstName:$（'#FirstName'）.val（），
LastName:$（'#LastName'）.val（）
};
for（itemsObj中的var属性）{
$（“#”+属性）。在（“
”）之后；//添加删除按钮
}
});
$（“#frm”）。在（'click'，'delete'，function（）上{
var idEle=this.id；
$（'#'+idEle）.val（''）；
$（this.remove（）；
删除项目sobj[idEle]；
console.log（itemsObj）；
});
});

名字：

姓氏：


提交
保持逻辑完整我已更新您的代码请检查

修改的jQuery

$(document).ready(function() {

  var ItemArray = [];//Initialize array

  $("button").click(function() {

    $("#results").empty();//Clear results div

    //Add form data to array
    ItemArray.push({
      FirstName: $('#FirstName').val(),
      LastName: $('#LastName').val(),
    });

        //iterate through array to display array values
    for (var i = 0; i < ItemArray.length; i++) {


      $("#results").append(ItemArray[i]['FirstName'] + " " + ItemArray[i]['LastName'] + " <br>");//Display  First and Last Name


      $("#results").append('<button class="Delete" value="'+i+'">Delete</button><br>');//add delete button

    }


  });

  //Delete
  $("#results").on("click", ".Delete", function() {

        //Delete selected index from array
    ItemArray.splice($(this).val(), 1);

        //clear div
    $("#results").empty();

        //iterate through array to display array values
    for (i = 0; i < ItemArray.length; i++) {


      $("#results").append(ItemArray[i]['FirstName'] + " " + ItemArray[i]['LastName'] + " <br>");//Display  First and Last Name

                 $("#results").append('<button class="Delete" value="'+i+'">Delete</button><br>');//add delete button


    }
  });
});

$（文档）.ready（函数（）{
var ItemArray=[]；//初始化数组
$（“按钮”）。单击（函数（）{
$（“#结果”）.empty（）；//清除结果div
//将表单数据添加到数组中
ItemArray.push({
FirstName:$（'#FirstName'）.val（），
LastName:$（'#LastName'）.val（），
});
//遍历数组以显示数组值
对于（var i=0；i”；//显示名字和姓氏
$（“#结果”）.append（'Delete
'）；//添加删除按钮
}
});
//删除
$（“#结果”）。在（“单击”，“删除”，函数（）上）{
//从数组中删除所选索引
拼接（$（this.val（），1）；
//净空div
$（“#结果”）.empty（）；
//遍历数组以显示数组值
对于（i=0；i”；//显示名字和姓氏
$（“#结果”）.append（'Delete
'）；//添加删除按钮
}
});
});
如果您不想与原始代码有太大的偏差，可以这样修改代码：

$(document).ready(function() {

  var ItemArray = []; //Initialize array

  $("button").click(function() {

  $("#results").empty(); //Clear results div

  //changed it a little bit, refactor according to your
 //requirements.
//Add form data to array, use splice for bulk pushing
  ItemArray.splice(0, 0, {
    FirstName: $('#FirstName').val(),
    LastName: $('#LastName').val()
  }, {
    Address: $('#Address').val(),
    Country: $('#Country').val()
  }, {
    Type: $('#Type').val()
  });

  //iterate through array to display array values
 //Homework: Wrap this block in a function
 /****************/
 for (i = 0; i < ItemArray.length; i++) {

   var keysArray = Object.keys(ItemArray[i]);
   var valueToAppend = "";
   for (var m = 0; m < keysArray.length; m++) {
     valueToAppend += ItemArray[i][keysArray[m]] + " ";
    //Homework(optional): Add the space between " " based 
    //on codition of not last entry in keysArray or there 
    //is more than single item in keysArray. 
    //Hint: use ternary operator
   }
  /**********************/

   $("#results").append(valueToAppend + " <br>"); 

  //id must be unique so use class instead of id in button 
  //set value of button while appending it 
  $("#results").append('<button class="Delete" value="' + i + '">Delete</button><br>'); //add delete button
}
});

//Delete
$("#results").on("click", ".Delete", function() {

  //Delete selected index from array
  //use 'this' not $('.Delete'), using $('.Delete') will
 //target the first of its kind in the DOM every time
 ItemArray.splice($(this).val(), 1);
 console.log(ItemArray);

 //Tip: Don't Redraw i.e. empty and refill $('#result') on every
 //delete. Just delete the desired node from DOM using code end 
 //alter your array. As **Rayon Dabre** suggested wrap the elements
 //inside a div

 //clear div
 //correct this in your code it is written as .empty instead
 //of .empty()
 $("#results").empty();

 //iterate through array to display array values
 //same as above
 for (i = 0; i < ItemArray.length; i++) {

   var keysArray = Object.keys(ItemArray[i]);
   var valueToAppend = "";
   for (var m = 0; m < keysArray.length; m++) {
    valueToAppend += ItemArray[i][keysArray[m]] + " ";
   }

   $("#results").append(valueToAppend + " <br>")

   $("#results").append('<button class="Delete" value="' + i + '">Delete</button><br>'); //add delete button
 }
});
});

$（文档）.ready（函数（）{
var ItemArray=[]；//初始化数组
$（“按钮”）。单击（函数（）{
$（“#结果”）.empty（）；//Clea
<form action="">
  First name:
  <input id="FirstName" type="text" name="FirstName" value="Mickey">
  <br> Last name:
  <input id="LastName" type="text" name="LastName" value="Mouse">
  <br> Address:
  <input id="Address" type="text" name="Address" value="Disneyland">
  <br>Country:
  <input id="Country" type="text" name="Country" value="USA">
  <br> Type:
  <input id="Type" type="text" name="Type" value="Cartoon-Character">
  <br>
</form>

<button>Submit</button>

<div id="results"></div>