Question

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，则启用products将不会产生任何影响，但将about置于其中只会显示about。如果全部开启，则显示about 如果一切都没有，那么什么都没有。

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

Answer 1

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

要求data-id与优先级对象中的键相同，并且它不是很优雅，但它可以完成您想要的操作，并且我更进一步确保它再次回到下一个最高位置取消选中某个项目（如果有）时的优先项目

编辑也表示你的优先级对象中有一个名为'highest'的额外键来确定初始边缘点，可以被调用任何东西，或用更好的机制替换

$(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();
                }
            }
        }        
    });              
});

Answer 2

你可以这样做。它还会禁用不允许的复选框。这是你想要的吗？ 演示： 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();
    }

});

使用JS对dom中的元素进行优先级排序的逻辑

2 个答案: