Javascript/jQuery 将切换类限制为 4

Javascript/jQuery limiting toggleClass to 4

本文关键字：jQuery Javascript      更新时间：2023-09-26

我试图阻止用户选择四个以上的带有 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);
    });

问题是选择器$('.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，或单击td元素的parentElement：tr元素

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

相关文章：