Question

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

然而，在点击td元素时，它也会被赋予“选定”类。所以我要做的是当用户再次点击“已选择”类的元素时，计数器会变为-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>

Answer 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);
});

Answer 2

这可以简化为：

$('.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

Answer 3

你可以这样改变你的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

Count ++和 - 不起作用

3 个答案: