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

);