jquery - 使用复选框显示/隐藏唯一内容

时间:2015-07-20 20:20:02

标签: javascript jquery checkbox hide show

我正在尝试使用复选框显示和隐藏内容。 我有7种水果沙拉。 它们如此: 1.苹果 2.橙色 梨 4. Apple-Orange 5.橙皮梨 6. Apple-Pear 7. Apple-Orange-Pear 我希望顾客能够使用3个复选框选择他们的水果,以选择他们想要的沙拉类型。如果客户选择,苹果我只想要苹果显示,如果他们选择橙色,我只想要橙色显示。如果他们选择苹果橙,我只想要苹果橙色水果沙拉(不是单一的苹果和橙子)。与Apple-orange-pear水果沙拉相同 - 如果选择这种,我只想要特定的沙拉展示,而不是单独的水果。

但是我的代码选择了所有的水果 - 例如,如果你勾选苹果,橙子和梨,它会显示所有相关的水果,当我只想要苹果橙色梨沙拉(一个独特的选择)。任何人都可以帮我这个吗?

这是我的小提琴: https://jsfiddle.net/daysable/41uusunm/

我的代码:

<style>
.box {
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
.apple {
    background: #F00;
}
.orange {
    background: #F60;
}
.pear {
    background: #FF0;
}
.fs-apple-orange {
    background: #F66;
}
.fs-orange-pear {
    background: #0C9;
}
.fs-apple-pear {
    background: #066;
}
.apple-orange-pear {
    background: #00F;
}
</style>
<div>
    <label>
        <input type="checkbox" id="apple" name="colorCheckbox" value="apple">apple</label>
    <label>
        <input type="checkbox" id="orange" name="colorCheckbox" value="orange">orange</label>
    <label>
        <input type="checkbox" id="pear" name="colorCheckbox" value="pear">pear</label>
</div>
<div class="apple box">Apple</div>
<div class="orange box">Orange</div>
<div class="pear box">Pear</div>
<div class="fs-apple-orange box">Apple Orange Fruit Salad</div>
<div class="fs-orange-pear box">Orange Pear Fruit Salad</div>
<div class="fs-apple-pear box">Apple Pear Fruit Salad</div>
<div class="apple-orange-pear box">Apple Orange Pear Fruit Salad</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('input[type="checkbox"]').click(function () {
    $('.box').hide();
    if ($('#apple').is(':checked')) $('.apple.box').show();
    if ($('#orange').is(':checked')) $('.orange.box').show();
    if ($('#pear').is(':checked')) $('.pear.box').show();
    if ($('#apple').is(':checked') && !$('#orange').is(':checked')) {
        $('.fs-apple-orange.box').show();
    }
    if ($('#orange').is(':checked') && !$('#pear').is(':checked')) {
        $('.fs-orange-pear.box').show();
    }
    if ($('#apple').is(':checked') && $('#pear').is(':checked')) {
         $('.fs-apple-pear.box').show();
    }
    if ($('#apple').is(':checked') && $('#orange').is(':checked') && $('#pear').is(':checked'))  {
         $('.apple-orange-pear.box').show();
    }
});
</script>

谢谢

4 个答案:

答案 0 :(得分:1)

您的if语句存在一些问题。你的一些条件没有任何意义,如


foreach (var field in fieldInfo)
{
    Property property;

    //If it's a collection field, get the appropriate collection name as set in its attribute
    if (field.FieldType.GetInterface("IEnumerable") != null) //currently lets strings pass through too.
    {
        //Get the type of the "type argument" of the IEnumerable
        Type[] typeArgs = field.FieldType.GetGenericArguments();
        //Get the collection name for that type to use in the XML
        MyAttribute att = (MyAttribute )Attribute.GetCustomAttribute(typeArgs[0], typeof(MyAttribute ));

        if (att == null)
            throw new ArgumentException("Using collection: {0} in Your class: {1}. Collection must have MyAttribute[Collection=\"\"] attribute defined on its class declaration.");

        else
        {   
         //do something with meta data          
        }
    }

    //If non-collection, possibly primitive field do something else
    else
    {
        //do other stuff here.
    }
}

当苹果被检查并且橙色没有时,它将显示苹果橙色盒子。对于单一水果,您需要检查其他水果是否错误。

&#13;
&#13;
if ($('#apple').is(':checked') && !$('#orange').is(':checked'))
    $('.fs-apple-orange.box').show();
&#13;
$('.apple-orange-pear.box').show();
$('input[type="checkbox"]').click(function () {
    $('.box').hide();
    var apple=$('#apple').is(':checked');
    var orange=$('#orange').is(':checked');
    var pear=$('#pear').is(':checked');
    
	if (apple&&!orange && !pear) $('.apple.box').show();
    else if (!apple&&orange&&!pear) $('.orange.box').show();
	else if (!apple&&!orange&&pear) $('.pear.box').show();
    else if (apple && orange &&!pear) {
		$('.fs-apple-orange.box').show();
    }
	else if (!apple && orange && pear) {
		$('.fs-orange-pear.box').show();
    }
    else if (apple&&!orange&&pear) {
		 $('.fs-apple-pear.box').show();
    }
    if (apple&&orange&&pear)  {
		 $('.apple-orange-pear.box').show();
	}
});
&#13;
.box {
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
.apple {
    background: #F00;
}
.orange {
    background: #F60;
}
.pear {
    background: #FF0;
}
.fs-apple-orange {
	background: #F66;
}
.fs-orange-pear {
	background: #0C9;
}
.fs-apple-pear {
	background: #066;
}
.apple-orange-pear {
	background: #00F;
}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

$('input[name="colorCheckbox"]').click(function () {
        $('.box').hide();
        var a = $('#apple').is(':checked');
        var o = $('#orange').is(':checked');
        var p = $('#pear').is(':checked');

        if(a && o && p)
            return $('.apple-orange-pear.box').show();
        if(a && p)
            return $('.fs-apple-pear.box').show();
        if(o && p)
            return $('.fs-orange-pear.box').show();
        if(a && o)
            return $('.fs-apple-orange.box').show();
        if(a)
            return $('.apple.box').show();
        if(o)
            return $('.orange.box').show();
        if(p)
            return $('.pear.box').show();   
});

&#13;
&#13;
$('input[name="colorCheckbox"]').click(function () {
        $('.box').hide();
        var a = $('#apple').is(':checked');
        var o = $('#orange').is(':checked');
        var p = $('#pear').is(':checked');
        
        if(a && o && p)
    		return $('.apple-orange-pear.box').show();
        if(a && p)
    		return $('.fs-apple-pear.box').show();
        if(o && p)
    		return $('.fs-orange-pear.box').show();
        if(a && o)
    		return $('.fs-apple-orange.box').show();
    	if(a)
            return $('.apple.box').show();
        if(o)
            return $('.orange.box').show();
    	if(p)
            return $('.pear.box').show();   
});
&#13;
.box {
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
.apple {
    background: #F00;
}
.orange {
    background: #F60;
}
.pear {
    background: #FF0;
}
.fs-apple-orange {
	background: #F66;
}
.fs-orange-pear {
	background: #0C9;
}
.fs-apple-pear {
	background: #066;
}
.apple-orange-pear {
	background: #00F;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label>
        <input type="checkbox" id="apple" name="colorCheckbox" value="apple">apple</label>
    <label>
        <input type="checkbox" id="orange" name="colorCheckbox" value="orange">orange</label>
    <label>
        <input type="checkbox" id="pear" name="colorCheckbox" value="pear">pear</label>
</div>
<div class="apple box">Apple</div>
<div class="orange box">Orange</div>
<div class="pear box">Pear</div>
<div class="fs-apple-orange box">Apple Orange Fruit Salad</div>
<div class="fs-orange-pear box">Orange Pear Fruit Salad</div>
<div class="fs-apple-pear box">Apple Pear Fruit Salad</div>
<div class="apple-orange-pear box">Apple Orange Pear Fruit Salad</div>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

无论你有什么成果以及有多少成果,这都会有效。

&

确保将所有类名设置为jQuery(function() { jQuery("input[name=colorCheckbox]").click(function() { //Get a list of the checked fruits. fruits = jQuery("input[name=colorCheckbox]:checked").map(function() { return this.id; }).get().sort().join("-"); //Hide all boxes. jQuery(".box").hide(); //Show the relevant one. jQuery(".fs-" + fruits).show(); }); }); ,水果名称按字母顺序排序(如fs-fruit1-fruit2)。

另外,您应该将所有脚本放在fs-apple-pear中,然后将其包裹起来<head>。在DOM准备好之前,jQuery不会运行代码。

此外,如果每个jQuery(function() { /* CODE */ });标记只有一个div,您可能希望将其用作ID而不是类,因为按ID匹配比按类匹配要快。

以下是map上的jQuery文档。

答案 3 :(得分:1)

更具伸缩性的方法是将数据属性中的过滤器值设置为box元素上的json数组。

<div class="box"  data-filters='["pear"]'>Pear</div>
<div class="box"  data-filters='["apple","orange"]'>Apple Orange Fruit Salad</div>

这些可以使用jQuery data()读取为数组。

然后你可以使用通用数组匹配代码,它们不关心你使用的具体值是什么,或者有多少个复选框....只是它们在复选框值和数组值之间匹配

var $checks=$('input[type="checkbox"]');

$checks.click(function () {
    // create array of checkbox values
    var values=$checks.filter(':checked').map(function(){
        return this.value
    }).get();
    // hide all the boxes and start filtering for matches
    $('.box').hide().filter(function(){
        // read filter array from box element
        var filterArr = $(this).data('filters');
       // reject if array lengths differ
       if(filterArr.length !== values.length){
          return false;
       }
        // check for all values matching between checkboxes and box filters
        var isMatch = filterArr.filter(function(val){
             return values.indexOf(val) >-1
        }).length === values.length;

        return isMatch
     // show the matching elemnts  
    }).show();
});

现在,当您在混合中获得新项目时,您不必重构代码,只需遵循相同的html格式

DEMO