Question

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

我不知道这个代码有多好和多短写。非常感谢你。

的jsfiddle

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/

更新：再次阅读您的问题后，我可以提出另一种解决方案

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而不是必须单独处理每个字符串，构造字符串更容易。由于自动类型检测，第二行中的串联将自动处理。这将消除几乎所有的if和其他的。

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 class =“service1 service2 service3”，然后为7及更高版本执行类似的操作，因此您不必拥有if语句。只需创建“.service”+ i并显示它。

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

我怎样才能更好地编写我的jquery代码？

3 个答案: