JavaScript 保持数组有序

Question

我试图以特定顺序保持数组，并且我已经了解了在特定索引位置插入的拼接函数，但它似乎没有做正确的事情。

这是我目前所拥有的一个小提琴：http://jsfiddle.net/drumichael/7r2pV/277/

在第 1 部分中，您可以选择一个或多个选项，但“第一”应始终为第一个，“第二”应始终为第 2，“第四”应始终位于这两者之后。如果您只选择“第一”和“第四”，则无论您选中复选框的顺序如何，它们都应按此顺序排列。

在第 2 部分 - 您只能选择选项 A、B 和 C 中的一个...并且该选项应始终位于数组的第 3 位（当然，除非您没有从第 1 部分中选择任何项目，它将全部在数组中）。

老实说，我不确定从这里去哪里。我试过这个：

var array_position = $(this).attr('id');
var messagePart = $(this).attr('data-message');

message.splice(array_position, 0, messagePart);

但它们仍然没有按正确的顺序结束。

Answer 1

由于 id 是按照您想要的顺序编号的，您可以按 id 对$('.mycheckbox:checked') 进行排序。然后使用$.each函数。

$(".mycheckbox").on("change", function() {
  var message = [];
  $('.mycheckbox:checked').sort(function(a, b) {
    return parseInt(a.id) > parseInt(b.id);
  }).each(function() {
    var messagePart = $(this).attr('data-message');
    message.push(messagePart);
  });
  $(".summary").html(message.join(", "));
});

演示： http://jsfiddle.net/kom7hd5o/

资源： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

使用splice() 时，插入项目的索引应为0-indexed。例如：

var arr = [1,2,3,5,6];
arr.splice(3, 0, 4);

将4 插入到第三个0 索引位置。

此外，当插入所需的值时，您需要使用0 作为splice 中的第二个参数。

要使您的代码正常工作，您应该将每个输入的id 参数更改为0-indexed，然后使用splice() 插入该项目。

$(".mycheckbox").on("change", function() {
  var message = [];
  $('.mycheckbox:checked').each(function() {
    var messagePart = $(this).attr('data-message');
    message.splice($(this).attr('id'), 0,messagePart);
  });
  $(".summary").html(message.join(", "));
});

这是一个工作示例：

$(".mycheckbox").on("change", function() {
  var message = [];
  $('.mycheckbox:checked').each(function() {
    var messagePart = $(this).attr('data-message');
    message.splice($(this).attr('id'), 0,messagePart);
  });
  $(".summary").html(message.join(", "));
});


$("input:checkbox").on('click', function() {
  // in the handler, 'this' refers to the box clicked on
  var $box = $(this);
  if ($box.is(":checked")) {
    // the name of the box is retrieved using the .attr() method
    // as it is assumed and expected to be immutable
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    // the checked state of the group/box on the other hand will change
    // and the current value is retrieved using .prop() method
    $(group).prop("checked", false);
    $box.prop("checked", true);
  } else {
    $box.prop("checked", false);
  }
});

.selection_area {
  border: 1px solid gray;
  margin-bottom: 10px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selection_area">
  <h4>Select as many of these options as desired</h4>
  <p>Should appear in numerical order</p>
  <input type="checkbox" class="mycheckbox" id="1" data-message="Second" />Second
  <br/>
  <input type="checkbox" class="mycheckbox" id="0" data-message="First" />First
  <br/>
  <input type="checkbox" class="mycheckbox" id="3" data-message="Fourth" />Fourth
  <br/>
</div>

<h5>Summary of Selections:</h5>
<div class="summary"></div>

这是updated JSFiddle。