jQuery / Javascript显示使用一个按钮隐藏多个内容？

Question

我有这样的要求

<p id="admore">Add More</p>
<span id="qulification1">
       Qulification 1<input type="text" name="qulification[]"/>
</span>
<br/>
<span id="qulification2" style="display: none">
    Qulification 2<input type="text" name="qulification[]"/>
    <span id="remove2">remove</span>
</span>
<br/>
<span id="qulification3" style="display: none">
    Qulification 3 <input type="text" name="qulification[]"/>
    <span id="remove3">remove</span>
</span>

qulification2和qulification3跨度默认保持隐藏，在“添加更多” btn上单击一次时，将显示qulification2。 下一步单击显示qulification3。 怎么做？

我使用两个“添加更多”按钮来完成此操作。 但这不是好方法

<p id="admore2">Add More</p>
<p id="admore3">Add More</p>

$('#addmore2').click(function() {
    $('#qulification2').show();
});

$('#addmore3').click(function() {
    $('#qulification3').show();
});

Answer 1

最简单的方法是使用类选择器，每单击一次，这些范围就会再次出现：

CSS： .invisible { display: none; } .invisible { display: none; }

html：在每个范围上，都应该是一个用于分组的额外类，另一个是用于隐身的类：

<span id="qulification1" class="q invisible">

js：

$('#addmore').click( function() { $('span.q.invisible').first().removeClass('invisible'); } );

Answer 2

您可以这样做：

var counter = 0;

$('#addmore2').click(function() {
    if (count === 0) {
        $('#qulification2').show();
    } else if (count == 1) {
        $('#qulification3').show();
    }
    count++;
});

Answer 3

当然，有很多方法可以解决您遇到的问题。 解决此问题的最简单方法是在程序中添加一个计数器，该计数器将计算您按下按钮的次数。 如果只希望显示内容而不希望再次隐藏它，则可以使用以下代码：

var count = 0;

$('#addmore2').click(function() {
    if (count == 0) {
        $('#qulification2').show();
    }
    else if (count == 1) {
        $('#qulification3').show();
    }
    count++;
});

但是，可能有更好的方法来解决您的问题。 如果您希望能够显示内容然后在屏幕上全部隐藏之后将其隐藏，则可以使用以下代码：

var count = 1;

$('#addmore2').click(function() {
    if (count == 1) {
        $('#qulification2').show();
    }
    else if (count == 2) {
        $('#qulification3').show();
    }
    else if (count == 3) {
        $('#qulification2').hide();
        $('#qulification3').hide();
        count = 0;
    }
    count++;
});

Answer 4

检查跨度的可见性并显示第一个隐藏的：

$('#addmore').click(function() {
    if ( $('#qulification2').css('display') == 'none' )                                     
          $('#qulification2').show();
   else if ( $('#qulification3').css('display') == 'none' )                                     
          $('#qulification3').show();});
}) ;

Answer 5

您真正应该做的是在用户单击“添加”按钮后实用地插入另一个节点。

给您的整个容器一个容器，只需附加它即可。 例如，

 $("#AddButton").click(
function()
{
$("#Container").append("<span>your item stuff</span>");
}

);