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 span默认保持隐藏，点击一次＆＃34;添加更多＆＃34; btn，它显示了qulification2。下一步单击显示qulification3。怎么做？

我使用两个Add More按钮完成了它。但这不是好办法，

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

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

);

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

5 个答案: