Javascript 三向类切换
我有两个单选按钮来切换两个可选文本,它可以工作:Javascript 三向类切换,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有两个单选按钮来切换两个可选文本,它可以工作: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://ajax.googleapis.com/ajax/li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
<style type="text/css">
.displayNone { display: none; }
</style>
</head>
<body>
<input type="radio" name="toggle" />A
<input type="radio" name="toggle" />B
<span class="A">A</span>
<span class="B displayNone">B</span>
<script type="text/javascript">
$('input[name=toggle]').change(function() {
$('.A, .B').toggleClass('displayNone');
})
</script>
</body>
</html>
.displayNone{display:none;}
A.
B
A.
B
$('input[name=toggle]')。更改(函数(){
$('.A,.B').toggleClass('displayNone');
})
现在我想用三个单选按钮在三个文本之间切换:
<input type="radio" name="toggle" />A
<input type="radio" name="toggle" />B
<input type="radio" name="toggle" />C
<span class="A">A</span>
<span class="B displayNone">B</span>
<span class="C displayNone">C</span>
A
B
C
A.
B
C
我考虑的解决方案看起来太冗长了。什么是干净的?为所有文本提供相同的类,但不同的ID:
<span class="foo" id="span_a">A</span>
<span class="foo displayNone" id="span_b">B</span>
<span class="foo displayNone" id="span_c">C</span>
编辑:
或者,如果您看到闪烁,可以使用jQuery的not选择器:
$(".foo").not("#" + x).hide();
$("#" + x).show();
另一种办法是:
$('input:radio[name="toggle"]').change(
function(){
$('span')
.eq($(this).index())
.removeClass('displayNone')
.siblings('span')
.addClass('displayNone');
});
编辑为更新的浏览器添加一个纯CSS方法来实现相同的功能:
input[type=radio]:nth-child(1):checked ~ span:nth-of-type(1),
input[type=radio]:nth-child(2):checked ~ span:nth-of-type(2),
input[type=radio]:nth-child(3):checked ~ span:nth-of-type(3){
height: 1em;
width: 100%;
background-color: #f90;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
span {
display: block;
overflow: hidden;
height: 0;
width: 0;
background-color: #fff;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
jQuery引用:
- 这里有一种方法:
$('input[name=toggle]').change(function() {
$('span').addClass('displayNone').filter('span:eq(' + $(this).index() + ')').removeClass('displayNone');
})
还有另一种方法(演示:)
这里的要点是,您可以使用中可选的第二个参数来指定是添加还是删除该类。只是为了好玩,这可能并不完全适合您的需要。这里有一个纯CSS解决方案
span {
display: none;
}
input[type="radio"]:checked + * + * + * {
display: inline;
}
这真是可笑的发明+1 =)
<input type="radio" name="toggle" value="A" checked="true"/>A
<input type="radio" name="toggle" value="B"/>B
<input type="radio" name="toggle" value="C"/>C
<br />
<span id="A" class="data">A</span>
<span id="B" class="data displayNone">B</span>
<span id="C" class="data displayNone">C</span>
$('input[name=toggle]').change(function() {
var newval = this.value;
$(".data").each(function() {
$(this).toggleClass('displayNone', this.id != newval);
});
});
span {
display: none;
}
input[type="radio"]:checked + * + * + * {
display: inline;
}