Question

我正在尝试使用以下方法创建一个Array，但到目前为止，我仅设法一个一个地获取数据。我真正希望实现的是存储一个包含所有数据的数组，以便可以使用PHP将其存储在数据库中。

到目前为止，我的问题是我似乎无法用JS创建一个简单的数组，当我尝试使用“推”时，它将返回空数组。

有人可以帮助我吗？

Sortable.create(simpleList, {
  onUpdate: function( /**Event*/ evt) {
    saveUnitsPositions();
  },
});

function saveUnitsPositions() {
  const GETPOSITION = document.querySelectorAll("#simpleList li");
  var positions = [];
  for (var i = 0; i < GETPOSITION.length; i++) {
    positions = GETPOSITION[i].getAttribute('data-value');
    console.log(positions);
  }
}

<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />


<ul id="simpleList" class="list-group">
  <li class="list-group-item course-unit" data-value="26321">
    Etude #1
  </li>
  <li class="list-group-item course-unit" data-value="26322">
    Etude #2
  </li>
  <li class="list-group-item course-unit disabled" data-value="Backing Tracks">
    Backing Tracks
  </li>
  <li class="list-group-item course-unit" data-value="26326">
    Backing track Fusion (118 bpm)
  </li>
  <li class="list-group-item course-unit" data-value="26327">
    Backing track Samba (90 bpm)
  </li>
  <li class="list-group-item course-unit disabled" data-value="Apostilas">
    Apostilas
  </li>
  <li class="list-group-item course-unit" data-value="26615" style="transform: translateZ(0px);">
    Etudes
  </li>
  <li class="list-group-item course-unit" data-value="26332">
    Tríades Mutantes – Apostila Completa
  </li>

</ul>

Answer 1

如果您尝试不使用Sortable，则可以使用push方法。也许问题出在Sortable。并且使用push方法是正确的，并且应该可以使用。

编辑：我再试一次，它与Sortable一起使用，当您更新某个位置时，它将填充数组。

Sortable.create(simpleList, {
  onUpdate: function( /**Event*/ evt) {
    saveUnitsPositions();
  },
});

function saveUnitsPositions() {
  const GETPOSITION = document.querySelectorAll("#simpleList li");
  var positions = [];
  for (var i = 0; i < GETPOSITION.length; i++) {
    positions.push(GETPOSITION[i].getAttribute('data-value')); // use push here
    console.log(positions);
  }
}

<DOCTYPE html>
<html>
<head>
<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<ul id="simpleList" class="list-group">
  <li class="list-group-item course-unit" data-value="26321">
    Etude #1
  </li>
  <li class="list-group-item course-unit" data-value="26322">
    Etude #2
  </li>
  <li class="list-group-item course-unit disabled" data-value="Backing Tracks">
    Backing Tracks
  </li>
  <li class="list-group-item course-unit" data-value="26326">
    Backing track Fusion (118 bpm)
  </li>
  <li class="list-group-item course-unit" data-value="26327">
    Backing track Samba (90 bpm)
  </li>
  <li class="list-group-item course-unit disabled" data-value="Apostilas">
    Apostilas
  </li>
  <li class="list-group-item course-unit" data-value="26615" style="transform: translateZ(0px);">
    Etudes
  </li>
  <li class="list-group-item course-unit" data-value="26332">
    Tríades Mutantes – Apostila Completa
  </li>

</ul>
</body>
</html>

Answer 2

push更改数组“就地”并返回更新后的数组的长度。因此[1,2,3].push(4,5)将返回五-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push 因此，如果您执行var result = [1,2,3].push(4,5)，结果将是5，而不是数组。

这是使用push的方法：

function saveUnitsPositions() {
  const GETPOSITION = document.querySelectorAll("#simpleList li");
  const positions = [];
  for (var i = 0; i < GETPOSITION.length; i++) {
    positions.push(GETPOSITION[i].getAttribute('data-value'));
  }
  console.log(positions);
}

或者，您可以使用concat方法-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat-该方法不会修改原始数组，而是返回具有连接结果的新数组：

function saveUnitsPositions() {
  const GETPOSITION = document.querySelectorAll("#simpleList li");
  var positions = [];
  for (var i = 0; i < GETPOSITION.length; i++) {
    positions = positions.concat( GETPOSITION[i].getAttribute('data-value') );
  }
  console.log(positions);
}

用JavaScript创建数组

2 个答案: