jQuery - 只取数组的第一个元素

Question

我在互联网上搜索过这个问题，但我没有找到类似的东西。

我在 php 中有一个数组。如果复选框的值与数组中的值相同，我将此数组传递给 javascript 函数以检查和禁用复选框。但是，该函数似乎只使用数组的第一个元素来禁用一个复选框。

例如，我的 php 数组中有 3 个元素 A11、A10、A9。当我将此数组传递给 js 函数时，它只选中并禁用了复选框 A11。这是为什么呢？

下面是我在 php 中的数组的代码：

$query = "SELECT reserved FROM et_seats WHERE event_id = '$theatre->id'";
$reserved = mysqli_query($conn,$query) or die(mysqli_error($conn));
$array = array();

while ($row = mysqli_fetch_array($reserved)){
    array_push($array, $row[0]);
}     

以下是我拥有的javascript函数：

<script>
    $(function() {
      var reserved = <?php echo '["' . implode('","', $array) . '"]' ?>;
      var seats = document.getElementsByClassName('seats');
      for (var i = 0; i <= seats.length; i++) {
        reserved.map(function(v) {
          if (seats[i].value === v) {
            seats[i].setAttribute("disabled", "true");
            seats[i].setAttribute("checked", "true");
          }
        });
      }
    });

</script>

为什么函数只取数组中的第一个元素？我哪里做错了？我怀疑这是我将 php 数组更改为 javascript 的行。我也试过var reserved = <?php echo json_encode($array); ?>;，但还是不行

这是我的 html 复选框的 sn-p。他们实际上是为了一个座位计划

<td>
 <input type="checkbox" class="seats" name="selected[]" value="A3">
</td>
<td>
 <input type="checkbox" class="seats" name="selected[]" value="A2">
</td>
<td>
 <input type="checkbox" class="seats" name="selected[]" value="A1">
</td>

Answer 1

更新

实际的问题是表中的值前面有空格。改变

array_push($array, $row[0]); 

到

array_push($array, trim($row[0]));

解决了问题。

原答案

除了应该是< seats.length 的<= seats.length 之外，只要reserved 获得有效的数组值，您的代码就可以正常工作。但是，我会在 reserved 上使用 indexOf 而不是 map 来查找 seats[i].value 是否在数组中。

$(function() {
  var reserved = ["A1","A6","A4"];
  var seats = document.getElementsByClassName('seats');
  for (i = 0; i < seats.length; i++) {
    var seat = seats[i];
    if (reserved.indexOf(seat.value) >= 0) {
        seat.setAttribute("disabled", "true");
        seat.setAttribute("checked", "true");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="A6">
</td>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="A5">
</td>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="A4">
</td>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="A3">
</td>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="A2">
</td>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="A1">
</td>

请注意，由于您使用的是 jQuery，您不妨使用.each 函数来简化代码：

$(function() {
  var reserved = ["A1","A6","A4"];
  $('.seats').each(function () {
    if (reserved.indexOf($(this).val()) >= 0) {
        $(this).attr("disabled", "true");
        $(this).attr("checked", "true");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="A6">
</td>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="A5">
</td>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="A4">
</td>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="A3">
</td>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="A2">
</td>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="A1">
</td>

Answer 2

由于您使用的是 jquery，因此请使用 forEach。如下所示。希望这可以帮助。我可以看到getElementsByClassName 返回一个 HTMLCollection，对于某些浏览器，索引不会像 seats[i] 这样的 HTMLCollection 工作。

<script>
    $(function() {
      var reserved = <?php echo '["' . implode('","', $array) . '"]' ?>;
      var seats = document.getElementsByClassName('seats');
      [].forEach.call(seats, function(el) {
        reserved.map(function(v) {
          if (el.value === v) {
            el.setAttribute("disabled", "true");
            el.setAttribute("checked", "true");
          }
        });
      });
    });
</script>