Question

我有6个过滤器和jQuery功能来切换＆＃34; on＆＃34;如果单击它们，则为class。

我如何对功能进行编码，以便一次只有2个按钮可以＆＃34;在＆＃34;？

例如，如果您单击1然后单击3，则它们都将是＆＃34; on＆＃34;。但是，如果单击4，则最旧的按钮（1）将关闭，然后4将打开。

Answer 1

您必须跟踪切换过滤器的顺序。

var filters = [];
var filters_max_on= 3;

$('.filter').click(function(){
   //turn the filter on
   $(this).addClass('on');
   //add it to the front of the array
   filters.unshift($(this));
   //check if there are too many filters active
   if(filters.length > filters_max_on){
      //remove the filter from the list and turn it off
      filters.pop().removeClass('on');
   }
});

http://jsfiddle.net/2dmo38a1/1/

Answer 2

http://jsfiddle.net/8ydujdjq/

<style>
.toggle a { color:green; }
.toggle a.on { color:red; }
</style>

<div class="toggle">
  <a href="#">1111</a>
  <a href="#">2222</a>
  <a href="#">3333</a>
  <a href="#">4444</a>
</div>

<script>
$(function() {
    var selected = [null, null];
    $('.toggle a').click(function() {
        if(selected[0] != null)
            selected[0].removeClass('on');
        $(this).addClass('on');
        selected[0] = selected[1];
        selected[1] = $(this);
    });
});
</script>

Answer 3

如果您已经发布了您尝试过的内容，那会更好。请阅读此How to ask

方法是：
1.将按钮的ID保存在阵列中 2.检查已选择两个以上 3.单击“更新”阵列并更改类

var onButtons = [];
$('button').on('click',function(){
    $(this).removeClass('off').addClass('on');
    if(onButtons.length == 2){
        $('#'+onButtons[0]).removeClass('on').addClass('off');
        onButtons.splice(0, 1);
    }
    onButtons.push($(this).attr('id'));
});

Working Fiddle

一次只能打开2个切换

3 个答案: