Javascript 计数++；而且--不'；行不通

我试图创建一个函数，当用户单击类为“n”的表的td元素时，计数器向上移动一个

但是，单击td元素时，它也会被指定为类“selected”。所以我要做的是，当用户再次单击类为“selected”的元素时，计数器变为-1

基本上，它应该像一个开关一样工作，一旦它被剪掉，它的+1和再次点击，它就会变成-1。我已经尝试过这个功能，但它不起作用

下面的代码是我的功能：

$('#plan td')
.bind('click',function(event) {
    if ($(this).hasClass("n"))
        count +=1;
}).bind('click',function(event) {
    if ($(this).hasClass("selected"))
        count -=1;
    $('.msg span.count').html(count);
});

这是分配“选定”类的resposnible：

$（'#plan td.n'）。单击（函数（）{
if（！$（this）.hasClass（“take”））
if（$（this）.hasClass（“选定”）| |$（“.selected”）.length<4）
$（此）.toggleClass（“选定”）；
});

这是html部分：

<div id='plan'>
  <table>
    <tr>
      <td class='n' id='_1a'>T</td>
      <td class='n' id='_1b'>F</td>
      <td class='n' id='_1c'>T</td>
      <td>1</td>
      <td class='n' id='_1d'>T</td>
      <td class='n' id='_1e'>F</td>
      <td class='n' id='_1f'>T</td>
    </tr>
  </table>
</div>

T
F
T
1.
T
F
T

你的工作太分散了。所有这些都可以在一个处理程序中处理

$('#plan .n').click(function() {
  var $this = $(this);
  if ($this.hasClass('selected') || $('.selected').length < 4) {
    $this.toggleClass('selected');
  }
  if ($this.hasClass('selected')) {
    count -= 1;
  } else {
    count += 1;
  }
  $('.msg span.count').html(count);
});

$（'#plan.n'）。单击（函数（）{
var$this=$（this）；
if（$this.hasClass（'selected'）|$（'.selected'）。长度<4）{
$this.toggleClass（'selected'）；
}
if（$this.hasClass（'selected'））{
计数-=1；
}否则{
计数+=1；
}
$（'.msg span.count'）.html（count）；
});

这可以简化为：

$('.n').click(function(){
  var cnt = $('#cnt').text();
  $(this).toggleClass('selected');
  if( $(this).hasClass('selected') ){
    cnt ++;
  } else{
    cnt --;
  }
  $('#cnt').text(cnt);
});

HTML:

T
F
T
1.
T
F
T
0

---

您可以通过这种方式更改javascript

  var count = 0;

  $('#plan  td')
  .bind('click', function(event) {
    if ($(this).hasClass("selected")) {
      count -= 1;
      $(this).removeClass("selected");
    } else if ($(".selected").length < 4) {
      count += 1;
      $(this).addClass("selected");
    }
    $('.msg span.count').html(count);
  })

var计数=0；
$（“td计划”）
.bind（'click'，函数（事件）{
if（$（this）.hasClass（“选定”））{
计数-=1；
$（此）.removeClass（“选定”）；
}else if（$（“.selected”）。长度<4）{
计数+=1；
$（此）.addClass（“选定”）；
}
$（'.msg span.count'）.html（count）；
})

---

1）为什么不直接做

$（“#plan.n”）。单击
？2） 您说它在单击时分配了类
选定的
，但看起来您没有这样做。3） 不要分配多个单击处理程序。在一个处理程序中，只需检查它是否选择了类
，
，然后在此基础上递增或递减。还有：1）带有
msg
类的HTML部分在哪里？2） 和
上过
课吗？3） 关于
$（“.selected”）.length<4
的逻辑是什么？我刚刚发布了一段代码，msg类用于在html中显示计数，lenght<4，因为我只希望最多有4个类处于活动状态。如果计数器为1，您单击另一个按钮，计数器是否会转到2，还是每个按钮都有自己的计数器？天哪，你太棒了。非常感谢，这正是我想要的。这实际上比其他回答更有效，谢谢。
<div id='plan'>
  <table>
    <tr>
      <td class='n' id='_1a'>T</td>
      <td class='n' id='_1b'>F</td>
      <td class='n' id='_1c'>T</td>
      <td>1</td>
      <td class='n' id='_1d'>T</td>
      <td class='n' id='_1e'>F</td>
      <td class='n' id='_1f'>T</td>
    </tr>
  </table>
</div>
<span id="cnt">0</span>

  var count = 0;

  $('#plan  td')
  .bind('click', function(event) {
    if ($(this).hasClass("selected")) {
      count -= 1;
      $(this).removeClass("selected");
    } else if ($(".selected").length < 4) {
      count += 1;
      $(this).addClass("selected");
    }
    $('.msg span.count').html(count);
  })