VAR 在所选元素之间进行计数和切换，但会复制属性

VAR counts and toggles between selected elements but duplicates the attribute

本文关键字：属性 复制 元素 之间 VAR      更新时间：2023-09-26

我正在研究琐碎的座位预订脚本。在我的代码中，我有一个模仿座位的桌子。每个td元素都分配了"n"类，并包含唯一的ID（例如id='_21d'）。这个想法是能够点击多达 4 个座位。此时应禁止进一步选择，将座位总数计算并显示为"您选择了 4 个座位中的 X"，所选座位的 ID 以字符串形式显示，例如"您预订的座位为：14F、11B、4C、10A"。

我正在到达那里，在突出显示 4 个座位后，我设法阻止了进一步的选择，正确计算了座位数，并在反复单击同一座位时切换 +=1 和 -=1。此外，座位 ID 被传递给字符串，但一旦再次单击同一座位，它们就不会被删除。相反，每次在选定座位和未选定座位之间切换时，ID 都会重复并添加到字符串中。这是我需要帮助的地方，如何使ID切换的方式与座位计数器相同？

var seatsAlloc = 0;
$('#plan td.n').bind('click', function(event) {
if (!$(this).hasClass("taken"))
if ($(this).hasClass("selected")) {
seatsAlloc -= 1;
$(this).removeClass("selected");
} else if ($(".selected").length < 4) {
seatsAlloc += 1;
$(this).addClass("selected");
var chosen = ($(this).attr('id').substring(1));
var seatNumb = (chosen.toUpperCase() +" ");
}
$("#selSeats").append(seatNumb);
$('span#seatsAlloc').html(seatsAlloc);
})

我没有看到您实际上在任何时候删除座位名称，只是添加它。 无论如何，我不会跟踪所选席位的数量，而是每次都计算它们并同时重建列表。 像这样的东西—— 

// I'm removing this because we can count the number of allocated 
// seats after each click easily enough
//var seatsAlloc = 0;
var maxSeatsAllowed = 4;
$('#plan td.n').bind('click', function(event) {
  if (!$(this).hasClass("taken"))
    if ($(this).hasClass("selected")) {
      $(this).removeClass("selected");
    } else if ($(".selected").length < maxSeatsAllowed) {
    $(this).addClass("selected");
  }
  // "map" will return a jQuery array of the id's 
  // of all the selected seats (with the first char 
  // removed) and "get" will then convert that array to a 
  // regular javascript array which can be "join"ed.  
  // We then replace the list with the new one.
  $("#selSeats").text($(".selected").map(function() {
    return this.id.substring(1);
  }).get().join(", "));
  // Count all the selected seats and replace the previous count
  $('span#seatsAlloc').text($(".selected").length + " seats of " + maxSeatsAllowed + " selected");
})
.selected {
  background-color: skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="plan">
  <tr>
    <td class="n" id="_A1">A1</td>
    <td class="n" id="_A2">A2</td>
    <td class="n" id="_A3">A3</td>
    <td class="n" id="_A4">A4</td>
    <td class="n" id="_A5">A5</td>
    <td class="n" id="_A6">A6</td>
    <td class="n" id="_A7">A7</td>
  </tr>
  <tr>
    <td class="n" id="_B1">B1</td>
    <td class="n" id="_B2">B2</td>
    <td class="n" id="_B3">B3</td>
    <td class="n" id="_B4">B4</td>
    <td class="n" id="_B5">B5</td>
    <td class="n" id="_B6">B6</td>
    <td class="n" id="_B7">B7</td>
  </tr>
  <tr>
    <td class="n" id="_C1">C1</td>
    <td class="n" id="_C2">C2</td>
    <td class="n" id="_C3">C3</td>
    <td class="n" id="_C4">C4</td>
    <td class="n" id="_C5">C5</td>
    <td class="n" id="_C6">C6</td>
    <td class="n" id="_C7">C7</td>
  </tr>
</table>
<span id="selSeats"></span>
<span id="seatsAlloc"></span>

相关文章：