我有一些粗略的代码,允许我根据两个单选按钮过滤一些结果。我正在努力添加第三个变体,它将作为一个“全部显示”,即一次显示所有四个div。任何帮助将不胜感激。
<p class="text1">Variants
<label>
<input type="radio" name="type" value="variant-2" id="type_0" checked="checked" />
Variant 1</label>
<label>
<input type="radio" name="type" value="variant-1" id="type_1" />
Variant 2</label>
</p>
<script>
$(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();
});
</script>
<div class="variant-1">Variant 1</div>
<div class="variant-2">Variant 2</div>
<div class="variant-1">Variant 1.1</div>
<div class="variant-2">Variant 2.1</div>
答案 0 :(得分:2)
这个怎么样? http://jsfiddle.net/WyxmF/1
<p class="text1">Variants
<label>
<input type="radio" name="type" value="variant-2" id="type_0" checked="checked" />
Variant 1</label>
<label>
<input type="radio" name="type" value="variant-1" id="type_1" />
Variant 2</label>
<label>
<input type="radio" name="type" value="variant-all" id="type_all" />
All</label>
</p>
<div class="variant variant-1">Variant 1</div>
<div class="variant variant-2">Variant 2</div>
<div class="variant variant-1">Variant 1.1</div>
<div class="variant variant-2">Variant 2.1</div>
$("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();
答案 1 :(得分:1)
根据属性“类” jsfiddle
尝试此解决方案的 HTML 强> 的
<p class="text1">Variants
<label>
<input class="gr" type="radio" name="type" value="one" id="type_0" checked="checked" />
Variant 1</label>
<label>
<input class="gr" type="radio" name="type" value="two" id="type_1" /> Variant 2</label>
<label>
<input class="gr" type="radio" name="type" value="all" id="type_all" /> All</label>
</p>
</br>
</br>
</br>
<div class="variant-1 one all">Variant 1</div>
<div class="variant-2 two all">Variant 2</div>
<div class="variant-1 one all">Variant 1.1</div>
<div class="variant-2 two all">Variant 2.1</div>
的 JS 强> 的
$(document).ready(function(){
$(".gr").click(function(){
var value = $(this).attr('value');
$('.all').hide();
$('.'+value ).show();
})
});
答案 2 :(得分:0)
尝试此检查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();
});
<p class="text1">Variants
<label>
<input type="radio" name="type" value="variant-2" id="type_0" checked="checked" />
Variant 1</label>
<label>
<input type="radio" name="type" value="variant-1" id="type_1" />
Variant 2</label>
<label>
<input type="radio" name="type" value="variant-3" id="type_2" />
Show All</label>
</p>
<div class="variant-1">Variant 1</div>
<div class="variant-2">Variant 2</div>
<div class="variant-1">Variant 1.1</div>
<div class="variant-2">Variant 2.1</div>
更新代码
减少重复的更好方法
$(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();
});
答案 3 :(得分:0)
试试这个..它简化了你的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();
});