邏輯用於優先使用JS

Question

在DOM元素

我有此小提琴：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恰恰說明。
如果全部關閉，則不顯示。

優先陣列需要被整合在某種程度上，但我不知道怎麼辦。如果有人能夠用一些邏輯來幫助我並整合這個陣列，那會很棒！

Answer 1

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

需要數據-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(); 
       } 
      } 
     }   
    });    
}); 
​ 

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

});