我怎樣才能寫得更好我的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」+我並顯示它。

請注意，無論哪種方式，最終都會隱藏所有內容並多次顯示某些內容。沒有傷害完成。