逻辑用于优先使用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(); 
    } 

});