单击时将激活/禁用添加到子元素

时间：2018-11-15 08:55:19

标签： javascript jquery

我正在做这个简单的选择，将“ active”类添加到clicked元素，并将“ disable”类添加到相对容器的元素。

我的问题是如何将active/disabled类从.col-md-5ths移到其子元素.num。

请检查代码。

谢谢。

$('.numChoice > .col-md-5ths').click(function() {
    if (!$(this).hasClass('disabled')) {
        var otherSide = $(this).parent().hasClass('first-row') ? '.second-row' : '.first-row';
        var otherElement = $(otherSide).children().removeClass('disabled').eq($(this).index());
        $(this).toggleClass('active').siblings().removeClass('active');
        $(this).hasClass('active') ? otherElement.addClass('disabled') : otherElement.removeClass(
            'disabled');
        $(this).hasClass('disabled') ? otherElement.removeClass('active') : otherElement.removeClass(
            'active');

    } else {
        $(this).removeClass('disabled');
        var otherSide = $(this).parent().hasClass('first-row') ? '.second-row' : '.first-row';
        var otherElement = $(otherSide).children().removeClass('disabled').eq($(this).index());
        $(this).toggleClass('active').siblings().removeClass('active');
        $(this).hasClass('active') ? otherElement.addClass('disabled') : otherElement.removeClass(
            'disabled');
        $(this).hasClass('disabled') ? otherElement.removeClass('active') : otherElement.removeClass(
            'active');

    }

});
.numChoice{
  display: block;
}
.num{
  width: 20px;
  height: 20px;
  background-color: #DDD;
  text-align: center;
  float: left;
  cursor: pointer;
}
.col-md-5ths.active{
    color: green;
}
.col-md-5ths.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>

4 个答案:

答案 0 :(得分：2)

这是一个较短的版本

$('.numChoice > .col-md-5ths > .num').on("click", function(e) {
  e.preventDefault(); // stop the link
  var $this = $(this);
  if ($this.is(".disabled")) return; // assuming you cannot click on a disabled
  $this.toggleClass('active');
  var act = $this.is(".active");
  var idx = $this.parent().index();
  var $otherSide = $this.closest(".numChoice").siblings(); // plural but only one
  var $otherElement = $otherSide.find(".num").eq(idx);
  $otherElement.toggleClass('disabled', act);
});
.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>

答案 1 :(得分：1)

您可以通过以下更简化的方式来实现：

$('.numChoice .num').click(function() {
  $('.num').removeClass('active').removeClass('disabled');
  var parent = $('.first-row').has(this).length == 0?'.first-row' : '.second-row';
  var idx = $(this).parent().index();
  $(this).toggleClass('active');
  $(parent+' .num').eq(idx).toggleClass('disabled');
});
.numChoice{
  display: block;
}
.num{
  width: 20px;
  height: 20px;
  background-color: #DDD;
  text-align: center;
  float: left;
  cursor: pointer;
}
.active{
    color: green;
}
.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>

答案 2 :(得分：0)

您可以这样做... 

$('.numChoice > .col-md-5ths').click(function(index,el) {
    var thisind = $(this).index() + 1;
    if($(this).parent().hasClass('first-row')){
      $(this).addClass('active');
      $(this).siblings().removeClass('active');
      $('.second-row .col-md-5ths').removeClass('disabled');
      $('.second-row .col-md-5ths:nth-child('+thisind+')').addClass('disabled');
    }
    else {
      $(this).addClass('disabled');
      $(this).siblings().removeClass('disabled');
      $('.first-row .col-md-5ths:nth-child('+thisind+')').addClass('disabled');
    }
});
.numChoice{
  display: block;
}
.num{
  width: 20px;
  height: 20px;
  background-color: #DDD;
  text-align: center;
  float: left;
  cursor: pointer;
}
.col-md-5ths.active{
    color: green;
}
.col-md-5ths.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>

答案 3 :(得分：0)

我为您创建了一个示例fiddle 

$('.numChoice > .col-md-5ths').click(function() {
            var otherSide = $(this).parent().hasClass('first-row') ? '.second-row' : '.first-row';
        var otherElement = $(otherSide).children().removeClass('disabled').eq($(this).index());
      var $thisNum = $(this).children();
    if (!$(this).hasClass('disabled')) {    
        $thisNum.toggleClass('active').siblings().removeClass('active');
        $thisNum.hasClass('active') ? otherElement.addClass('disabled') : otherElement.removeClass('disabled');
        $thisNum.hasClass('disabled') ? otherElement.removeClass('active') : otherElement.removeClass('active');
    } else {
        $(this).removeClass('disabled');
        $thisNum.toggleClass('active').siblings().removeClass('active');
        $thisNum.hasClass('active') ? otherElement.addClass('disabled') : otherElement.removeClass('disabled');
        $thisNum.hasClass('disabled') ? otherElement.removeClass('active') : otherElement.removeClass('active');

    }

});
相关问题
最新问题