admin管理员组

文章数量:1302328

I have two radio buttons to toggle two alternative texts and it works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   ".dtd">
<html xmlns="">

<head>
    <script src=".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>

Now I want to make it three radio buttons to toggle between three texts:

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

The solution I'm thinking about looks too verbose. What would be the clean one?

I have two radio buttons to toggle two alternative texts and it works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3/1999/xhtml">

<head>
    <script src="http://ajax.googleapis./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>

Now I want to make it three radio buttons to toggle between three texts:

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

The solution I'm thinking about looks too verbose. What would be the clean one?

  • javascript
  • jquery
  • html
  • css
Share asked Apr 24, 2012 at 16:28 Clodoaldo NetoClodoaldo Neto 126k29 gold badges249 silver badges273 bronze badges 0
Add a ment  | 

5 Answers 5

Reset to default 7

One further approach:

$('input:radio[name="toggle"]').change(
    function(){
        $('span')
            .eq($(this).index())
            .removeClass('displayNone')
            .siblings('span')
            .addClass('displayNone');
    });​

JS Fiddle demo.

Edited to add, for the more up-to-date browsers, a pure CSS means of acplishing the same:

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;
}​

JS Fiddle demo.

jQuery References:

  • addClass().
  • change().
  • eq().
  • index().
  • :radio selector.
  • removeClass().
  • siblings().

CSS References:

  • CSS transitions.
  • E ~ F general-sibling binator.
  • :nth-child() pseudo-class.
  • :nth-child() W3 wiki entry.
  • :nth-of-type() pseudo-class.
  • :nth-of-type() W3 wiki entry.

Here's one method: jsFiddle example.

$('input[name=toggle]').change(function() {
    $('span').addClass('displayNone').filter('span:eq(' + $(this).index() + ')').removeClass('displayNone');
})​

Just for fun, this may not suit your needs exactly. Here's a pure CSS solution.

span {
  display: none;
}

​input[type="radio"]:checked + * + * + * {
  display: inline;
}​​

​

And here's another way to do it (demo: http://jsfiddle/bauKH/)

<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);
    });                                                    
});

The takeaway message here would be that you can use the optional second argument in .toggleClass() to specify whether the class should be added or removed.

Give all your text spans the same class, but different IDs:

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

Then hide them all before displaying the one you want

function show(x) {
    $(".foo").hide();
    $("#" + x).show();
}

Edit:

Or, you can use jQuery's not selector if you are seeing a flicker:

$(".foo").not("#" + x).hide();
$("#" + x).show();

本文标签： javascriptThree way class toggleStack Overflow

版权声明：本文标题：javascript - Three way class toggle - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741711291a2393859.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。