一次只能打开2个切换

时间:2015-04-07 06:50:38

标签: jquery

我有6个过滤器和jQuery功能来切换" on"如果单击它们,则为class。

我如何对功能进行编码,以便一次只有2个按钮可以"在"?

例如,如果您单击1然后单击3,则它们都将是" on"。但是,如果单击4,则最旧的按钮(1)将关闭,然后4将打开。

3 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

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>

答案 2 :(得分:0)

如果您已经发布了您尝试过的内容,那会更好。请阅读此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