Question

我正在研究2个选择，在单击时添加活动类，在相反的选择上添加禁用的类。我的问题是如何获得两个选择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的意思是：并获取具有活动类的内部元素。

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

Answer 2

我已经稍微重写了您的JS部分。请检查它是否在寻找。

$('.numChoice .num').on("click", function() {
    if ($(this).hasClass('disabled')){
      return false; // let's skip disabled items?
    }
    var idx = $(this).parent().index();
    $(this).toggleClass('active');
    var act = $(this).is(".active");
    const $others = $(this).closest(".numChoice").siblings();
    $others.each(function(){
      const $opposite = $(this).find('.num').eq(idx);
      $opposite.removeClass('active').toggleClass('disabled', act);
    });
    updateCounts();

});

function updateCounts(){
  const len1 = $('.first-row .active').length;
  const len2 = $('.second-row .active').length;
  console.clear();
  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>

计算两个选择上的活动班级

2 个答案: