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がオンの場合、オンにproductsしても何の効果もありませんが、挿入aboutすると が表示され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 に答える