一次只打開2個切換

Question

我有6個過濾器和jQuery功能來切換「開」類，如果你點擊它們。

我該如何編碼功能，以便每次只有2個按鈕可以「打開」？

例如，如果您單擊1然後3，它們都將「打開」。但是，如果單擊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