jquery - 我无法在 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” -> “.input1” - 隐藏 & “.input2” - 显示 如果我想第二次推“.round” -> 什么也没发生。（这就是问题）

如何隐藏“.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：

++是一个增量运算符。

此运算符将其操作数递增（加一）并返回一个值。如果使用后缀，操作数后面有运算符（例如，x++），则返回递增前的值。如果在操作数之前使用带运算符的前缀（例如 ++x），则返回递增后的值。

Answer 3

这将起作用，在第三次单击时文本将从显示中消失：

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

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