Question

我正在尝试按特定顺序保留数组，并且我已经了解了要在特定索引位置插入的拼接功能，但它似乎没有做正确的事情。

这是我到目前为止的一个小提琴：http://jsfiddle.net/drumichael/7r2pV/277/

在第1部分中，您可以选择一个或多个选项，但是＆＃34; First＆＃34;永远应该是第一，＆＃34;第二＆＃34;第二，＆＃34;第四＆＃34;在这两个之后。如果你只选择＆＃34; First＆＃34; ＆安培; ＆＃34;第四＆＃34;，无论您选中方框的顺序如何，它们都应按此顺序排列。

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

老实说，我不知道从哪里开始。我试过这个：

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

message.splice(array_position, 0, messagePart);

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

Answer 1

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

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

会将4插入第3个0 - 索引位置。

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

要使代码正常工作，您应该将每个输入的id参数更改为0 - 已编入索引，然后使用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。

Answer 2

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

JavaScript按顺序保存数组

2 个答案: