0

我做了这个小提琴：http: //jsfiddle.net/GMH6q/2/

HTML：

<div class="feature" id="about">about</div>
<div class="feature" id="services">services</div>
<div class="feature" id="products">products</div>

<label>About</label><input type="checkbox" data-id="about" />
<label>Services</label><input type="checkbox" data-id="services" />
<label>Products</label><input type="checkbox" data-id="products" />

JavaScript：

$(document).ready(function(){
    var priority = {'about':1, 'services':2, 'products':3};
    $('input[type="checkbox"]').change(function(){
        var el = $(this).attr('data-id');        
        if($(this).is(':checked')){                        
           $('.feature').hide();             
           $('.feature#' + el).show();
        } else {
           $('.feature#' + el).hide();    
        }
    });              
});

如果about打开，则单击任何其他复选框将没有任何效果。
同样，如果services是 on，则 put productson 不会有任何效果，但 put aboutin 只会显示about。
如果一切都打开，那么about只是显示。
如果全部关闭，则没有任何显示。

优先级数组需要以某种方式集成，但我不知道如何。如果有人可以帮助我解决一些逻辑并集成数组，那就太好了！

4

2 回答 2

1

小提琴http://jsfiddle.net/NAdCP/20/

要求 data-id 与您的优先级对象中的键相同，它不是很优雅，但它可以满足您的要求，我更进一步确保它回退到下一个最高检查的优先级项目时你取消选中一个项目（如果有的话）

编辑还表明您的优先级对象中有一个名为“最高”的额外键来确定初始边缘点，并且可以被称为任何东西，或者用更好的机制替换

$(document).ready(function(){
    var priority = {'about':1, 'services':2, 'products':3, 'highest':4};
    var highest = priority['highest']
    var current = highest;
    $('input[type="checkbox"]').change(function(){
        var el = $(this).attr('data-id');
        if($(this).is(':checked')){
            if(priority[el] < current ){
               current = priority[el];          
               $('.feature').hide();             
               $('.feature#' + el).show();
            }
        } else {
            if(priority[el] == current){
               $('.feature#' + el).hide();
               var pNext= highest;
                var pNextName= "";
                $('input[type="checkbox"]').each(function(){
                    if($(this).is(':checked')){
                        var elNext = $(this).attr('data-id');
                        if(priority[elNext] < pNext){
                            pNext = priority[elNext];
                            pNextName= elNext;
                        }
                    }
                });

                current = pNext;
                if(current != highest && pNextName != ""){
                    $('.feature#' + pNextName).show();
                }
            }
        }        
    });              
});
​
于 2012-04-23T00:54:03.767 回答
0

你可以这样做。它还禁用不允许的复选框。这就是你所追求的吗？
演示：http: //jsfiddle.net/elclanrs/GMH6q/4/

var features = ['about', 'services', 'products'],
    $inputs = $('input:checkbox'),
    $divs = $('.feature');

$inputs.change(function() {

    $inputs.prop('disabled', false);

    var name = $(this).attr('data-id'),
        idx = features.indexOf(name),
        arr = features.slice(idx + 1, features.lenght);

    if ($(this).is(':checked')) {
        $.each(arr, function(i, v) {
            $('input:checkbox[data-id="' + v + '"]').prop('disabled', true);
        });
        $divs.hide().eq(idx).show();
    } else {
        $divs.hide();
    }

});
于 2012-04-23T00:37:20.443 回答