计数 ++ 和 -- 不起作用答案

【问题标题】：Count ++ and -- doesn't work计数 ++ 和 -- 不起作用
【发布时间】：2016-02-17 16:21:49
【问题描述】：

我正在尝试创建一个函数，当用户单击具有“n”类的表的 td 元素时，计数器会增加一个。

然而，在点击 td 元素时，它也会被分配到“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);
});

这是分配“选定”类的责任：

$('#plan td.n').click(function(){
    if (!$(this).hasClass("taken"))
    if ($(this).hasClass("selected") || $(".selected").length < 4) 
        $(this).toggleClass("selected");
});

这是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>

【问题讨论】：

1) 为什么不直接使用$('#plan .n').click？ 2) 你说它在点击时被分配了selected 类，但看起来你并没有这样做。 3）不要分配多个点击处理程序。在您的一个处理程序中，只需检查它是否具有 selected 类，然后根据该类递增或递减。
还有更多：1）msg 类的 HTML 部分在哪里？ 2）和takenclass？ 3）$(".selected").length < 4的逻辑是什么？
我刚刚发布了一些代码，msg 类用于在 html 中显示计数，长度为
如果计数器在 1 并且您单击另一个按钮，计数器会转到 2，还是每个按钮都有自己的计数器？

标签： javascript jquery html count

【解决方案1】：

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

$('#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);
});

【讨论】：

天哪，你太棒了。非常感谢，这正是我想要的。

【解决方案2】：

你可以用这种方式改变你的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);
  })

JSFiddle

【讨论】：

这实际上比其他响应更好，谢谢。

【解决方案3】：

这可以简化为：

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

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>
<span id="cnt">0</span>

JSFiddle

【讨论】：