Question

我试图在“＆＃39; .main＆＃39;单击它，它将切换其类成为一个＆＃39; .second＆＃39;，这个新类将变为红色，但该元素将被归类为＆＃39; .main＆＃39;因此，我仍然可以将其称为＆＃39; .main＆＃39;。之后，我希望它添加到＆＃39;计数＆＃39;变量，如果再次点击，则恢复为＆＃39; .main＆＃39;的外观。上课，然后减去＆＃39; count＆＃39;可变！

HTML

<div class="container">
  <div id="box" class="main"></div>
  <div id="box" class="main"></div>
  <div id="box" class="main"></div>
  <div id="box" class="main"></div>
</div>

相关的CSS

.main {
  background: #888888;
}
.second {
  background: red;
}

#box {
  width: 10px;
  height: 10px;
  border-radius: 10px;

  margin: 1% 1%;
  line-height: 100px;
  text-align: center;
}

并且，jQuery

$(document).ready(function() {
  var count = 0;

  $('.main').click(function() {
    $(this).toggleClass('second')
    $(this).toggleClass('main')

    if ($(this).hasClass('main')) {
      count++;
    } else if ($(this).hasClass('second')) {
      count--;
    }
    if (count === 4) {
      alert('Success')
    }
  });
});

所以我需要帮助，因为jQuery会不断添加到＆＃39; count＆＃39;即使＆＃39;这个＆＃39; hasClass＆＃39; .second＆＃39;！

如果你认为你有一个答案需要在JSFIDDLE中检查并点击一个盒子4次，如果你得到一个提示，那就是＆＃39; COUNT - ;＆＃39; ISN＆＃39; T还是

Answer 1

您可能需要更改这些内容。

删除count变量，改为使用jQuery的长度。
请勿对ID使用相同的值。

＆＃13;

$(document).ready(function() {

  $('.main').click(function() {
    $(this).toggleClass('second').toggleClass('main')

    if ($('.main').length == 4)
      alert('Success')
  });
});

＆＃13;

.main {
  background: blue;
}
.second {
  background: red;
}

#box1, #box2, #box3, #box4 {
  width: 10px;
  height: 10px;
  border-radius: 10px;

  margin: 1% 1%;
  line-height: 100px;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div id="box1" class="main"></div>
  <div id="box2" class="main"></div>
  <div id="box3" class="main"></div>
  <div id="box4" class="main"></div>
</div>

＆＃13;

Answer 2

您需要从$(this).toggleClass('main')中删除$('.main').click(function() {，将代码更新为

$('.main').click(function() {
    $(this).toggleClass('second')

    if ($(this).hasClass('second')) {
      count++;
    } else if ($(this).hasClass('main')) {
      count--;
    }
    if (count === 4) {
      alert('Success')
    }
});

当您切换.main类时，它会被删除，并且不会出现在点击通话中

您的HTML中不能有多个具有相同ID的项目，如果多次出现，您可以分配该项目。请参阅下面链接的小提琴，了解如何使用它的示例

jsfiddle示例：http://jsfiddle.net/ks14dnL1/4/

如果hasClass帮助并从变量中减去

2 个答案: