javascript - VAR 计数并在所选元素之间切换，但复制属性

Question

我正在处理琐碎的座位预订脚本。在我的代码中，我有一张模仿座位的 table 。每个 td 元素都分配了“n”类并包含唯一 ID(例如 id='_21d')。这个想法是能够点击最多 4 个席位。此时应禁止进一步选择，席位总数计算并显示为“您选择了 4 个席位中的 X 个。” 所选席位的 ID 显示在字符串中，例如 “您的预定座位为:14F、11B、4C、10A”。

我到了那里，在突出显示 4 个座位后，我设法阻止了进一步的选择，座位数被正确计算并在重复单击同一个座位时切换 +=1 和 -=1。此外，一旦再次点击同一个座位，座位 ID 就会传递给字符串 BUT，它们不会被删除。相反，每次在选定和未选定的座位之间切换时，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);

})

Answer 1

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

// 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>