0

我想更好地编写我的代码。我不是专业编码员。我想要会员选择我的报价表检查服务，-服务 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();
    }
});
4

3 回答 3

3

我宁愿让标记对所有情况都更通用，如下所示

   <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/

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

考虑向您的代码添加一些映射

   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()
   })
于 2013-08-02T21:48:15.243 回答
0

做这个：

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

无论 h 是什么，都更容易构造一个字符串，而不是必须单独处理每个字符串。由于自动类型检测，第二行中的连接是自动处理的。这将摆脱几乎所有的 if 和 else 。

于 2013-08-02T21:38:31.297 回答
0

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

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 并显示它。

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

于 2013-08-02T21:49:01.763 回答