Question

我需要一个警报，以便在所有元素都添加了一个类时显示

html

    <ul class="container">
    <li class="box"> </li>
    <li class="box"> </li>
    <li class="box"> </li>
    </ul>

jquery -

         $(document).ready(function() {
         $('.box').click(function() {
          $(this).addClass('Boxaddedclass');
          });
         });

单击每个框后，会在每个列表中添加一个“Boxaddedclass”类，其类为“.box”。

jquery -

         $(document).ready(function () {
           $(".box").click(function () {
            if($(".box").hasClass("Boxaddedclass")) {
             alert('all boxes have the added class')

              } 
            });

目前，在我点击每个Box类后，每次都会出现一个警报，当所有警报都添加了类而不是单独添加时，我需要显示警报。有什么方法吗？

Answer 1

将.box分类的元素数与.Boxaddedclass

进行比较

var boxCount = $(".box").length;
var addedBoxClass = $(".Boxaddedclass").length;
if (boxCount === addedBoxClass) {
    alert("All boxes have added the class"); //note that I don't support alert, you really should console.log it, or do something fancier
}

Answer 2

$(".box.Boxaddedclass")选择器可用于检查.box元素是否还有.Boxaddedclass类。

仅使用$(".Boxaddedclass")不会考虑.box类的Boxaddedclass元素！

$('.box').click(function() {
  $(this).addClass('Boxaddedclass');
});

$('button').on('click', function() {
  var boxCount = $(".box").length;
  var addedBoxClass = $(".box.Boxaddedclass").length;
  if (boxCount === addedBoxClass) {
    alert("All boxes have added the class");
  } else {
    alert('Not yet!')
  }
});

.Boxaddedclass {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="container">
  <li class="box">Content...</li>
  <li class="box">Content...</li>
  <li class="box">Content...</li>
</ul>
<div class="Boxaddedclass">Other content not having `box` class but `Boxaddedclass`</div>
<br>
<button>Check</button>

当具有相同类名的多个元素具有添加的类时发出警报

2 个答案: