数组索引在不应该的时候交换

Question

我目前有一个动态生成的 checkbox，单击它会创建一个 table。可以在我的 checkbox 上 select 编辑多个 select 离子，我将其存储在一个数组中。我有一个用于存储不同 select 离子的循环，例如第 1、第 2 和第 3 个检查的 select 离子。

Checkbox

option_one
option_two
options_three

我面临的问题是，如果我 select 像 1>2>3 这样的升序选项会正确生成 tables:

Table_One
Table_two
Table_Three

然而，如果我 select 以降序排列，或者我将其混合，option_one 最终总是作为第一个 select 离子传递，即使这不是真的.

我的代码：

$(document).on("change", ".tbl_list", function () {
    var tbls = [];
    $("input:checkbox[name='tbl[]']:checked").each(function () {
        tbls.push($(this).val());
        var tbl2Name = " ";
        var tbl3Name = " ";
        var tblName = " ";
        for (i = 0; i < tbls.length; i++) {
            if (i === 0) {
                tblName = tbls[i];
            }
            if (i == 1) {
                tbl2Name = tbls[i];
            }
            if (i == 2) {
                tbl3Name = tbls[i];
            }
        }
        $("#table").html(tblName);

其中 tbl_list 是 checkbox class-名称，tbl[] 是名称。那么为什么 tblName 总是假定复选框列表中第一个对象的值？

Answer 1

让我们稍微分解一下，每次您的一个复选框发生变化时，您都会创建一个全新的数组

$(document).on("change", ".tbl_list", function () {
    var tbls = [];

然后循环遍历填充此列表的所有选中复选框

$("input:checkbox[name='tbl[]']:checked").each(function () {
    tbls.push($(this).val());

jquery .each 将遍历所有选中的复选框，它按照它们在 DOM 中出现的顺序执行此操作，而不是按照您碰巧选中的顺序他们在（为什么会？它怎么知道？）

如果你想保留你签入它们的顺序那么你需要维护一个持久列表，并在选中时将新项目推到列表的末尾，并在未选中时删除项目。

Answer 2

根据建议我做了一些修改，现在可以正常工作了。

var tbls = [];
$(document).on("change", ".tbl_list", function () {
    if (this.checked){
        tbls.push($(this).val());
        console.log(tbls);
        var tbl2Name = " ";
        var tbl3Name = " ";
        var tblName = " ";
        for (i = 0; i < tbls.length; i++) {
            if (i === 0) {
                tblName = tbls[i];
            }
            if (i == 1) {
                tbl2Name = tbls[i];
            }
            if (i == 2) {
                tbl3Name = tbls[i];
            }
        }
    }

        $("#table").html(tblName);
        window.sessionStorage.setItem("tblN", tblName);
        window.sessionStorage.setItem("tblN2", tbl2Name);
        window.sessionStorage.setItem("tblN3", tbl3Name);

Answer 3

$(".checkbox").change(function() {
    if(this.checked) {
        //push into array

     else { 
       //remove from array 

    }
});

你能不能只检查选中了哪个复选框并将其值添加到数组中，这样你就可以保持顺序。

数组索引在不应该的时候交换

Array index swaps when its not supposed to

javascript

arrays

checkbox

jquery

loops