Javascript show hide基于单选按钮

我有一些粗略的代码，允许我根据两个单选按钮过滤一些结果。 我正在努力添加第三个变体，它将作为“全部显示”，即一次显示所有四个div。 任何帮助将非常感激。

Variants   Variant 1   Variant 2 
  $(document).ready(function(){ $("input[name$='type']").click(function(){ var value = $(this).val(); if(value=='variant-2') { $(".variant-1").show(); $(".variant-2").hide(); } else if(value=='variant-1') { $(".variant-2").show(); $(".variant-1").hide(); } }); $(".variant-1").show(); $(".variant-2").hide(); });  
Variant 1
 
Variant 2
 
Variant 1.1
 
Variant 2.1 

Answer 1

这个怎么样？ http://jsfiddle.net/WyxmF/1

 
Variants   Variant 1   Variant 2   All 
 
Variant 1
 
Variant 2
 
Variant 1.1
 
Variant 2.1
​ $("input[name$='type']").click(function() { var value = $(this).val(); if (value == 'variant-2') { $(".variant-1").show(); $(".variant-2").hide(); } else if (value == 'variant-1') { $(".variant-2").show(); $(".variant-1").hide(); } else if (value == 'variant-all') { $(".variant").show(); } }); $(".variant-1").show(); $(".variant-2").hide();​  
Variants   Variant 1   Variant 2   All 
 
Variant 1
 
Variant 2
 
Variant 1.1
 
Variant 2.1
​ $("input[name$='type']").click(function() { var value = $(this).val(); if (value == 'variant-2') { $(".variant-1").show(); $(".variant-2").hide(); } else if (value == 'variant-1') { $(".variant-2").show(); $(".variant-1").hide(); } else if (value == 'variant-all') { $(".variant").show(); } }); $(".variant-1").show(); $(".variant-2").hide();​ 

Answer 2

尝试基于属性’ class’jsfiddle的此解决方案

HTML

  
Variants   Variant 1   Variant 2   All 
    
Variant 1
 
Variant 2
 
Variant 1.1
 
Variant 2.1 

JS

 $(document).ready(function(){ $(".gr").click(function(){ var value = $(this).attr('value'); $('.all').hide(); $('.'+value ).show(); }) });​ 

Answer 3

试试这个FIDDLE

 $(document).ready(function() { $("input[name$='type']").click(function() { var value = $(this).val(); if (value == 'variant-2') { $(".variant-1").show(); $(".variant-2").hide(); } else if (value == 'variant-1') { $(".variant-2").show(); $(".variant-1").hide(); } else{ $(".variant-2").show(); $(".variant-1").show(); } }); $(".variant-1").show(); $(".variant-2").hide(); });​ 
Variants   Variant 1   Variant 2   Show All 
 
Variant 1
 
Variant 2
 
Variant 1.1
 
Variant 2.1
​ 

更新的代码

减少反应的更好方法

 $(document).ready(function() { $("input[name$='type']").click(function() { var value = $(this).val(); if(value == 'variant-3'){ $('[class*=variant]').show(); } else{ $('[class*=variant]').hide(); $('.'+ value ).show(); } }).click(); });​ 

更新的FIDDLE

Answer 4

试试这个..它简化了你的if else

 $(document).ready(function() { $("input[name$='type']").click(function() { var value = $(this).val(); if (value == 'showall') { $('div[class^=variant]').show(); } else { var $thisClass = $('div.' + value); $thisClass.show(); $('div[class^=variant]').not($thisClass).hide(); } }); $("input[value=variant-1]").click(); });​ 

小提琴