我无法隐藏/显示jquery中的一些元素

Question

我有3个“跨度”

<span class="input1" style="display:block;"><span class="round"></span></span>
<span class="input2" style="display:none;"><span class="round"></span></span>
<span class="input3" style="display:none;"><span class="round"></span></span>

这是剧本：

$(document).ready(function() {
    act = 1;
    next = act+1;
    });

$(".round").click(function (){
         $('.input'+act).hide();
         $('.input'+next).show();
         act = next;
    });

第一次推“.round” - ＆gt; “.input1” - 隐藏＆amp; “.input2” - 显示 如果我想第二次推“.round” - ＆gt;没啥事儿。 （这是问题）

如何隐藏“.input2”并显示“.input3”？ 感谢您的帮助，对不起我的英语！

Answer 1

我可能不会尝试通过特定的类名来实现...使用DOM结构。

$(".round").click(function (){
   $(this).parent().hide().next().show();
});

JSFiddle：http://jsfiddle.net/U7cYN/

Answer 2

解决方案

因为next始终等于2.

第二次，act == 2和next == 2让你隐藏然后显示相同的元素。

试试：

$('.round').click(function (){
    $('.input' + act).hide();
    $('.input' + next).show();
    act = next++;
});

---

一点解释

根据MDN：

++ 是一个增量运算符。

  

此运算符递增（加1）其操作数并返回a   值。如果使用postfix，则使用操作符后的操作符（例如，   x ++），然后在递增之前返回值。如果使用前缀   在操作数之前使用运算符（例如，++ x），然后返回   递增后的值。

Answer 3

这将有效，第三次点击文本将从显示中消失：

$(document).ready(function() {
    act = 1;
    next = act;
});

$(".round").click(function (){
     next++;
     $('.input'+act).hide();
     $('.input'+next).show();
     act = next;
});