Question

所以我想使用splice

删除数组元素

custom_boxes_exist.splice($.inArray(id, custom_boxes_exist),1);
custom_boxes_order.splice($.inArray(id, custom_boxes_order),1);
box_content.splice($.inArray(id, box_content),1);

使用拼接后在输出数组内容时，我得到以下输出：

Array(5) [ "Content of box with id 0", undefined, undefined, undefined, "Content of box with id 4" ]

以某种方式删除元素，以某种方式没有删除元素。

添加一个框，将其删除然后添加一个新框即可看到它

var custom_box_id = 0;
var custom_boxes_order = [];
var custom_boxes_exist = [];
var box_content = [];


function addNewBox() {
  reOrderArray();
  custom_boxes_exist.push(custom_box_id);
  custom_boxes_order[custom_box_id] = 1;
  box_content[custom_box_id] = "Content of box with id " + custom_box_id;
  console.log("adding new box: with id " + custom_box_id);
  console.log(custom_boxes_order);
  console.log(custom_boxes_exist);
  console.log(box_content);
  $("#custom_boxes").prepend('<div id="box_' + custom_box_id + '" class="box">' + box_content[custom_box_id] + ' <span style="float:right;"><button onclick="changeOrder(' + custom_box_id + ',"up")">[UP]</button><button onclick="changeOrder(' + custom_box_id + ',"down")">[DOWN]</button><button onclick="deleteCustomBox(' + custom_box_id + ')">[x]</button></span></div>');
  custom_box_id++;
}

function changeOrder(id) {
  //
}

function reOrderArray() {
  $.each(custom_boxes_order, function(key, value) {
    custom_boxes_order[key] = value + 1;
  });
}

function testDel(id) {
  $.each(custom_boxes_exist, function(key, value) {
    if (value == id) {
      custom_boxes_exist.splice($.inArray(id, custom_boxes_exist), 1);
      return;
    }
  });
}

function deleteCustomBox(id) {
  $("#box_" + id).remove();
  custom_boxes_exist.splice($.inArray(id, custom_boxes_exist), 1);
  custom_boxes_order.splice($.inArray(id, custom_boxes_order), 1);
  box_content.splice($.inArray(id, box_content), 1);
}

.box {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid black;
  border-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><button onclick="addNewBox()">add new box</button></center>
<div id="editor_header" class="box">HEADER</div>
<div id="custom_boxes"></div>
<div id="editor_bottom" class="box">FOOTER</div>

Answer 1

这不是因为splice()。这是因为删除元素后添加到数组的方式。您可以这样做：

box_content[custom_box_id] = "Content of box with id "+custom_box_id;

每次创建新框时，

custom_box_id都会递增。如果您创建框0，1和2，则该数组包含

box_content[0] = "Contents of box with id 0"
box_content[1] = "Contents of box with id 1"
box_content[2] = "Contents of box with id 2"

和custom_box_id现在为3。

如果删除框1，则数组现在包含：

box_content[0] = "Contents of box with id 0"
box_content[1] = "Contents of box with id 2"

请注意，数组索引不再与内容中的ID相匹配。

添加下一个框后，您现在拥有

box_content[0] = "Contents of box with id 0"
box_content[1] = "Contents of box with id 2"
box_content[3] = "Contents of box with id 3"

请注意，没有box_content[2]，因为custom_box_id是3。当您查看整个数组时，此丢失的元素显示为undefined。

如果您不希望出现这些间隙，则应使用push()来添加到数组中，而不是分配给特定的索引。您是针对custom_boxes_exist数组执行此操作，而不是针对custom_boxes_order和box_contents执行此操作。

用拼接移除元素后，有未定义的内容

1 个答案: