如何在点击时添加/删除数组中的元素？

Question

当我点击一个座位时，如何防止重复，这样当我再次点击它时，它就不会追加，而是连续删除/添加。

  var ids = [];
  $seatid = ids;
  var status = "unavailable";

  $(document).ready(function() {
    var $div = $("<div id='form'></div>").appendTo(".appended"), code;

      $('.seat').click(function(){
        var id = jQuery(this).attr("id");

        if ($(this).hasClass('available')){
          code = jQuery(this).attr("id");
          ids.push(code);
          $div.append(code + "<br />");
          console.log(code);

        }else{
          console.log('Failed');
          console.log(id);
        }                        
      });
  });

参见输出的图片

Answer 1

在推入新ID后，需要删除类“Available”。我并不精通JQuery，但它看起来像这样：

if ($(this).hasClass('available')){
      code = jQuery(this).attr("id");
      ids.push(code);
      $div.append(code + "<br />");
      console.log(code);
      //REMOVE AVAILABLE CLASS
      $(this).removeClass("available");
    }

您可能需要在运行else语句时重新添加类（假设您希望在单击“不可用”座位时使其变为“可用”）。

当从“不可用”（在数组中）到“可用”（不在数组中）时，还需要一些逻辑来从数组中删除seatID