Question

我正在处理一个简单的菜单，在点击时在div上添加活动类，然后在兄弟元素上删除活动类。

目前，我有两个菜单，我想要的是当我点击一个元素时，另一个容器上的相等子位置会添加禁用类。

示例：我点击了左侧菜单中的＃1 ，在右侧菜单中＃1 被禁用。

希望你理解我。

感谢。

$(document).ready(function(){
  $('.selection div').click(function(){
     $(this).toggleClass('active').siblings().removeClass('active');
  });
});

.selection{
  display: inline-block;
}
.selection div{
  background-color: #DDD;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100px;
  cursor: pointer;
}
.selection div.active{
  background-color: green;
  color: #FFF;
}
.selection div.disabled{
  background-color: red;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container">
  <div class="selection left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="selection right">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

Answer 1

单击时禁用另一侧的同一级别的元素，并在单击禁用的元素时不执行任何操作。

＆＃13;

$(document).ready(function(){
    $('.selection > div').click(function(){
        if(!$(this).hasClass('disabled')) {
            var otherSide = $(this).parent().hasClass('left') ? '.right' : '.left';
            var otherElement = $(otherSide).children().removeClass('disabled').eq($(this).index());
            $(this).toggleClass('active').siblings().removeClass('active');
            $(this).hasClass('active') ? otherElement.addClass('disabled') : otherElement.removeClass('disabled');
        }
    });
});

＆＃13;

.selection{
  display: inline-block;
}
.selection div{
  background-color: #DDD;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100px;
  cursor: pointer;
}
.selection div.active{
  background-color: green;
  color: #FFF;
}
.selection div.disabled{
  background-color: red;
  color: #FFF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="selection left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="selection right">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

＆＃13;

Answer 2

不是很漂亮，但它有效:)

$(document).ready(function(){
$('.selection div').click(function(){
var classs=$(this).attr("class");
$(this).removeClass();
$('.'+classs).css('background-color','white');
$('.'+classs).css('color','white'); 
$(this).css('display','visible');   
$(this).toggleClass('active').siblings().removeClass('active');
$(this).css('display','visible');
});
});

.selection{
  display: inline-block;
}
.selection div{
  background-color: #DDD;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100px;
  cursor: pointer;
}
.selection div.active{
  background-color: green;
  color: #FFF;
}
.selection div.disabled{
  background-color: red;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="selection left">
    <div class="button1">1</div>
    <div class="button2">2</div>
    <div class="button3">3</div>
    <div class="button4">4</div>
    <div class="button5">5</div>
  </div>
  <div class="selection right">
    <div class="button1">1</div>
    <div class="button2">2</div>
    <div class="button3">3</div>
    <div class="button4">4</div>
    <div class="button5">5</div>
  </div>
</div>

Answer 3

您需要找到所点击项目的index，然后禁用其他列表中具有相同索引的项目。

例如，如果您点击1，其他1将被停用。当您点击2（来自与有效1相同的列表）时，已启用已停用的1。这就是您需要otherDisabled变量的原因。

您还可以将pointer-events:none添加到.disabled课程，这样就无法click了。

＆＃13;

$(document).ready(function() {
  let item = $('.selection div')
  $(item).click(function() {
    let i = $(this).index(),
        disableMe = $(this).parents('.selection').siblings().find('div').eq(i),
        otherDisabled = disableMe.siblings()
    $(this).toggleClass('active').siblings().removeClass('active');
    disableMe.toggleClass('disabled')
    otherDisabled.removeClass('disabled')
    
  });
});

＆＃13;

.selection {
  display: inline-block;
}

.selection div {
  background-color: #DDD;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100px;
  cursor: pointer;
}

.selection div.active {
  background-color: green;
  color: #FFF;
}

.selection div.disabled {
  background-color: red;
  color: #FFF;
  pointer-events:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="selection left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="selection right">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

＆＃13;

Answer 4

希望这会奏效，

$(document).ready(function(){
  $('.selection div').click(function(){
    var indexOfDiv = $(this).index();
    $(this).toggleClass('active');
    $(this).parents('.selection').siblings().find('div').eq(indexOfDiv).toggleClass('disabled');
  });
});

在其他容器

4 个答案: