javascript - 计算两个选项的活跃类别

Question

我正在处理两个选择，即在单击时添加事件类，并在相反的选择上添加禁用类。我的问题是如何获取两个选择 ex 中存在的类数。 Selection1 = 1 且 Selection2 = 5。而且我的计数和结果显示也已关闭。

希望您能帮助我，谢谢。

$('.numChoice > .col-md-5ths > .num').on("click", function() {
    var idx = $(this).parent().index();
    var act = $(this).is(".active");
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
    $(this).toggleClass('active');
    $otherElement.toggleClass('disabled', !act);

    var len1 = $otherSide.find('.active').length;
    var len2 = $(this).closest('.numChoice').find('.active').length;
    console.log('selection1: ' + len1, 'selection2: ' + len2);

});

.numChoice {
  display: block;
}

.num {
  width: 20px;
  height: 20px;
  background-color: #DDD;
  text-align: center;
  float: left;
  cursor: pointer;
}

.num.active {
  color: green;
}

.num.disabled {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="numChoice first-row">
    <div class="col-md-5ths">
      <div class="num">1</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">2</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">3</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">4</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">5</div>
    </div>
  </div>
  <br><br>
  <div class="numChoice second-row">
    <div class="col-md-5ths">
      <div class="num">1</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">2</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">3</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">4</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">5</div>
    </div>
  </div>
</div>

Answer 1

如果我理解，您想要根据第二行计算第一行的事件类:

const firstRowActiveLabels = $('.numChoice.first-row .active').length;
const secondRowActiveLabels = $('.numChoice.second-row .active').length;

.numChoice.first-row 表示:获取具有 numChoice 且具有第一行类的类。.active 表示:获取具有active类的内部元素。

$('.numChoice > .col-md-5ths > .num').on("click", function() {
    var idx = $(this).parent().index();
    var act = $(this).is(".active");
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
    $(this).toggleClass('active');
    $otherElement.toggleClass('disabled', !act);

    var len1 = $('.numChoice.first-row .active').length;
    var len2 = $('.numChoice.second-row .active').length;
    console.log('selection1: ' + len1, 'selection2: ' + len2);

});

.numChoice {
  display: block;
}

.num {
  width: 20px;
  height: 20px;
  background-color: #DDD;
  text-align: center;
  float: left;
  cursor: pointer;
}

.num.active {
  color: green;
}

.num.disabled {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="numChoice first-row">
    <div class="col-md-5ths">
      <div class="num">1</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">2</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">3</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">4</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">5</div>
    </div>
  </div>
  <br><br>
  <div class="numChoice second-row">
    <div class="col-md-5ths">
      <div class="num">1</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">2</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">3</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">4</div>
    </div>
    <div class="col-md-5ths">
      <div class="num">5</div>
    </div>
  </div>
</div>