我怎样才能写得更好我的jQuery代码？

Question

我想更好地写我的代码。我不是专业编码器。 我希望会员选择我的报价表格检查服务， - 服务1,2,3相同grup， - 服务7,8,9,10,11,12,13另一个grup， - 和另一单（4,5 ，6）

我不知道如何更好和短的写这样的代码。非常感谢。

的jsfiddle

http://jsfiddle.net/elturko/v5rjE/

HTML

<input name="service[]" value="1" class="service_type" type="checkbox"> service 1<br /> 
<input name="service[]" value="2" class="service_type" type="checkbox"> service 2<br /> 
<input name="service[]" value="3" class="service_type" type="checkbox"> service 3<br /> 
<input name="service[]" value="4" class="service_type" type="checkbox"> service 4<br /> 
<input name="service[]" value="5" class="service_type" type="checkbox"> service 5<br /> 
<input name="service[]" value="6" class="service_type" type="checkbox"> service 6<br /> 
<input name="service[]" value="7" class="service_type" type="checkbox"> service 7<br /> 
<input name="service[]" value="8" class="service_type" type="checkbox"> service 8<br /> 
<input name="service[]" value="9" class="service_type" type="checkbox"> service 9<br /> 
<input name="service[]" value="10" class="service_type" type="checkbox"> service 10<br /> 
<input name="service[]" value="11" class="service_type" type="checkbox"> service 11<br /> 
<input name="service[]" value="12" class="service_type" type="checkbox"> service 12<br /> 
<input name="service[]" value="13" class="service_type" type="checkbox"> service 13<br /><br /><br /> 


<div id="service123">service1 or service2 or service3</div> 
<div id="service4">service4</div> 
<div id="service5">service5</div> 
<div id="service6">service6</div> 
<div id="others">other services(7-13)</div> 

CSS

div{ display:none;} 

JAVASCRIPT

var checked = []; 
$("input:checkbox[name=service[]]").live('click', function(){ 
    var $this = $(this), 
    h = $this.val(); 

    if ($this.is(':checked')) { 
     checked.push(parseInt(h)); 
     if(h<=3) $("#service123").show(); // 1,2,3 any one 
     else if(h==4) $("#service4").show(); 
     else if(h==5) $("#service5").show(); 
     else if(h==6) $("#service6").show(); 
     else $("#others").show(); // 7-13 between 
    } 
    else{ 
     checked.splice(checked.indexOf(parseInt(h)),1); 
     if((h <=3) && ($.inArray(1, checked) == -1 && $.inArray(2, checked) == -1 && $.inArray(3, checked) == -1)) $("#service123").hide(); 
     else if(h==4) $("#service4").hide(); 
     else if(h==5) $("#service5").hide(); 
     else if(h==6) $("#service6").hide(); 
     else if((7>= h <=13) && ($.inArray(7, checked) == -1 && $.inArray(8, checked) == -1 && $.inArray(9, checked) == -1 && $.inArray(10, checked) == -1 && $.inArray(11, checked) == -1 && $.inArray(12, checked) == -1 && $.inArray(13, checked) == -1)) $("#others").hide(); 
    } 
}); 

Answer 1

我宁愿做标记更通用的所有情况，如下图所示

<div class="service s1 s2 s3">service1 or service2 or service3</div> 
    <div class="service s4">service4</div> 
    <div class="service s5">service5</div> 
    <div class="service s6">service6</div> 
    <div class="service s7 s8 s9 s10 s11 s12 s13">other services(7-13)</div> 

，这将让我简化的逻辑：

$('.service').hide() 

    $('input.service_type:checked').each(function() { 
     $('.service.s'+this.value).show() 
    }) 

更新后的提琴http://jsfiddle.net/v5rjE/2/

UPDATE：再次阅读您的问题后，我可以想出另一个解决方案

Cosider加入一些映射到你的代码

var serviceTypes = [0, 1,1,1,2,3,4] 
    , services = ['#other', '#service123', '#service4', '#service5', '#service6'] 

现在已经检查值就可以得到服务的ID，并用它来获得选择

services[serviceTypes[this.value]|0] 

这将计算为比服务以外的东西，如果存在于映射中，或者在'#other'的情况下映射未命中值

因此所有的代码将会如此简单：

var serviceTypes = [0, 1,1,1,2,3,4] 
    , services = ['#other', '#service123', '#service4', '#service5', '#service6'] 
    , all = services.join(',')    

    $(all).hide()  
    $('input.service_type:checked').each(function() { 
     $(services[serviceTypes[this.value]|0]).show() 
    }) 

Answer 2

这样做：

h = parseInt(h); 
queryString = "#service"+h; 
$(queryString).show(); 

更容易构建给出任何h是不是必须单独处理每一个字符串。由于自动类型检测，第二行中的连接会自动处理。这将摆脱几乎所有你的如果和其他人的。

Answer 3

我喜欢这个。也许它会给你一些想法：

if ($this.is(':checked')) { 
    checked.push(parseInt(h)); 
} else { 
    checked.splice(checked.indexOf(parseInt(h)),1); 
} 

$("#service123, #service4, #service5, #service6, #others).hide(); 
for (var i=0; i < checked.length; ++i) { 
    var id = "#service" + i; 
    if (i <=3) id = "#service123"; 
    if (i > 6) id = "#others"; 
    $(id).show(); 
} 

你也可以改变使用类，并给service123类=“服务1服务2服务3”，然后做7和更大的类似的东西，所以你不会有有if声明。只需创建“.service”+我并显示它。

请注意，无论哪种方式，最终都会隐藏所有内容并多次显示某些内容。没有伤害完成。