jQuery并在两种情况之间切换

时间:2010-03-12 20:09:53

标签: jquery

我有这段代码

<a href="#">
<span style="border-right: medium none;" class="Yes">Yes</span>
</a>
<a href="#">
<span class="No">No</span>
</a>

如果没有current我想要点击是的类调用current添加是的span并从no删除current类。

如果是current,我希望在点击没有课程时调用current添加无跨度并从是删除current课程。

我希望每个案例只需点击一下即可。

3 个答案:

答案 0 :(得分:2)

试试这个:

$(".Yes, .No").click(function() {
  if(!$(this).hasClass("current"))
    $(".Yes, .No").toggleClass("current");
});

YesNo都会触发点击,但只有在当前点击未发生点击时才会执行操作。只需将当前设置为您想要的任何内容,切换将在此处按照您在问题中描述的内容进行处理。

答案 1 :(得分:1)

这是一个示例。这是第一次切割,可能这是可以优化的。我要做的就是从所有元素中删除current类,并将其添加到当前元素中。

你必须修改你的html才能拥有一个独特的类

    <a href="#">
    <span style="border-right: medium none;" class="Yes yesno">Yes</span>
</a>
<a href="#">
    <span class="No yesno">No</span>
</a>

这是jQuery代码

        $('.yesno').click(function(){
            $('.yesno').each(function(i, v){
                $(v).removeClass('current');
            });
            $(this).addClass('current');
        });

看看它有帮助..

答案 2 :(得分:1)

也许我误解了你的问题,但看起来你正试图制作像Radio Buttons一样的东西。

<div class="radioButtons">
    <a href="#">Yes</a>
    <a href="#">No</a>
    <a href="#">Maybe</a>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    function select(event) {
        var clicked = $(event.target);
        clicked.siblings('a').removeClass('selected');
        clicked.addClass('selected');
    }

    $(function() {
        $('.radioButtons a').click(select);
    });
</script>