Javascript/jQuery 将toggleClass 限制为4

Question

我试图阻止用户选择超过四个带有toggleClass 和附加长度的免费座位，但无法完成此操作，并且尚未找到有效的解决方案。谢谢。

JSfiddle
https://jsfiddle.net/xgrorxnp/1/

HTML

  <td class='n' id='1_A'>T</td>
  <td class='n' id='1_B'>F</td>
  <td class='n' id='1_C'>T</td>
  <td class="row_num">1</td>
  <td class='n' id='1_D'>T</td>
  <td class='n' id='1_E'>F</td>
  <td class='n' id='1_F'>T</td>

我的尝试

$('.n:contains(\'F\')').click(function(){
        var $this = $(this);
    $(this).toggleClass('selected', !$this.hasClass('selected') &&
        $('.n:contains(\'F\') .selected').length < 4);
    });

Answer 1

问题是选择器 $('.n:contains(\'F\') .selected') 内的空格，它尝试匹配 .n具有下降元素 .selected ，而不是 .n其中有.selected className本身

尝试替换

$('.n:contains(\'F\').selected', this.parentElement)

对于

$('.n:contains(\'F\') .selected').length < 4);

例如；

    $(this).toggleClass('selected', !$this.hasClass('selected') &&
        $('.n:contains(\'F\').selected', this.parentElement).length < amount);

哪里this.parentElement是context匹配，或 parentElement :tr单击的元素 td元素

jsfiddle https://jsfiddle.net/xgrorxnp/3/