jQuery - 通過按鈕值傳遞變量

Question

我試圖在我的應用程序上創建一個允許用戶輸入名稱和地址的窗體。一旦用戶輸入信息，我需要驗證並添加一個數組以提交給php函數。提交之前，我想讓用戶刪除並編輯他們提交的內容。

現在我可以將數據添加到數組，但我很難刪除數組中的元素。如何將按鈕值分配給數組的索引值。我知道$('#Delete').val(i);正在for循環的每次迭代重新分配，但我不知道還有什麼要做。

另外，我絕對還是JavaScript的新手。如果你看到更好的方式來做到這一點，最有可能的，請讓我知道。

$(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(), 
 
    }); 
 

 
\t \t //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 id="Delete" value="">Delete</button><br>');//add delete button 
 

 
     $('#Delete').val(i);//set delete button value 
 

 
    } 
 

 

 
    }); 
 

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

 
\t \t //Delete selected index from array 
 
    ItemArray.splice($('#Delete').val(), 1); 
 
    
 
\t \t //clear div 
 
    $("#results").empty; 
 
    
 
\t \t //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 id="Delete" value="">Delete</button><br>');//add delete button 
 

 
     $('#Delete').val(i);//set delete button value 
 

 
    } 
 
    }); 
 
});

<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> 
 
</form> 
 

 
<button>Submit</button> 
 

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

Answer 1

裹HTML在div元素附加，這樣它會更容易找到/刪除div元素。

沒有指向iterateItemArray陣列上每add/remove操作。

使用.delete而不是#delete（id），因爲您應該沒有多個元素具有相同的id屬性值。

使用data-index屬性可獲取當前單擊元素的index。

試試這個：

$(document).ready(function() { 
 
    var ItemArray = []; 
 
    $("#submit").click(function() { 
 
    ItemArray.push({ 
 
     FirstName: $('#FirstName').val(), 
 
     LastName: $('#LastName').val(), 
 
    }); 
 
    $("#results").append('<div>' + $('#FirstName').val() + " " + $('#LastName').val() + " " + '<br><button class="delete" data-index="' + (ItemArray.length - 1) + '">Delete</button><br></div>'); 
 
    }); 
 
    $("#results").on("click", ".delete", function() { 
 
    ItemArray.splice($(this).data('index'), 1); 
 
    $(this).closest('div').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<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> 
 
</form> 
 
<button id='submit'>Submit</button> 
 
<hr/> 
 
<div id="results"></div>

Fiddle here

Answer 2

怎麼樣把一個包裝爲每名&按鈕組合？您不必在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 

Answer 3

採取一種新的方法，嘗試這樣的。我已經使用Object代替Arrays

$(document).ready(function() { 
 
    var itemsObj; 
 

 
    $("button").click(function() { 
 
     $("#results").empty(); 
 
     itemsObj = { 
 
     FirstName: $('#FirstName').val(), 
 
     LastName: $('#LastName').val() 
 
     }; 
 
     for (var property in itemsObj) { 
 
     $("#" + property).after('<a href="#" class="delete" id="' + property + '" value="">Delete ' + itemsObj[property] + '</a><br>'); //add delete button 
 
     } 
 
    }); 
 

 
    $("#frm").on('click', '.delete', function() { 
 
     var idEle = this.id; 
 
     $('#' + idEle).val(''); 
 
     $(this).remove(); 
 
     delete itemsObj[idEle]; 
 
     console.log(itemsObj); 
 
    }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form action="" id='frm'> 
 
    First name: 
 
    <input id="FirstName" type="text" name="FirstName" value="Mickey"> 
 
    <br>Last name: 
 
    <input id="LastName" type="text" name="LastName" value="Mouse"> 
 
    <br> 
 
</form> 
 

 
<button>Submit</button>

Answer 4

保持你的邏輯完整的我已經更新了你的代碼查收https://jsfiddle.net/r4qufcfg/

修改的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 


    } 
    }); 
}); 

Answer 5

，如果你不不想偏離畝CH從您的原始代碼，你可以修改你的代碼是這樣的：

$(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 
} 
}); 
}); 

HTML

<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> 

See this working