Question

当我每次点击+ Add More链接时，我需要一个帮助来逐个显示3个div，同时+ Add more链接在显示第3个div后消失。请帮帮我

<input size="20" id="high_light1" type="text" /> 
 <span><a href="#" id="add"> + Add more</a></span>
 <div style="display:none;"><input size="20" id="high_light2" type="text" /></div>
 <div style="display:none;"><input size="20" id="high_light3" type="text" /></div>
 <div style="display:none;"><input size="20" id="high_light4" type="text" /></div>

注意：我不想生成新的div，我需要在每次点击时创建现有的div display:block。

由于

Answer 1

如果您将使用jQuery：

$('#add').click(function () {
    $('.toAdd').each(function () {
        if ($(this).css('display') == 'none') {
            $(this).css('display', 'block');
            return false;
        }
    });
    var i = 0;
    $('.toAdd').each(function () {
        if ($(this).css('display') != 'none') {
            i++;
        }
    });

    if (i == 3) $('#add').hide();
});

点击此处：http://jsfiddle.net/SFRgz/

Answer 2

纯Javascript解决方案（没有jQuery依赖）：

Demo

var divCount = 1;

window.onload = function(){
    document.getElementById("add").onclick = function(){

        if(divCount < 4)
        {
            divCount++;

            var input = document.getElementById("high_light" + divCount);
            input.parentNode.style.display = "";

            if(divCount == 4)
            {
                this.style.display = "none";   
            }
        }

    };
}

Answer 3

您可以使用fadeIn()方法（请参阅http://api.jquery.com/fadeIn/）将JQuery用于平滑动画，然后使用fadeOut()方法使按钮消失。

如果您不想使用JQuery，请尝试使用document.getElementById(id).style.visibility="hidden" || "visible";

Answer 4

在这里你可以看到我是如何做到的

<div class="input-fields">
<input size="20" id="high_light1" type="text" /> 
 <span><a href="#" id="add"> + Add more</a></span>
 <div style="display:none;"><input size="20" id="high_light2" type="text" /></div>
 <div style="display:none;"><input size="20" id="high_light3" type="text" /></div>
 <div style="display:none;"><input size="20" id="high_light4" type="text" /></div>
</div>

和js var i = 0;

$('#add').click(function() {
    if(i===0){
        $('.input-fields div:nth-of-type(1)').css("display","block");
        i++;
    }
    else if(i===1){
        $('.input-fields div:nth-of-type(2)').css("display","block");
        i++;
    }
    else if(i===2){
        $('.input-fields div:nth-of-type(3)').css("display","block");
        $('#add').hide();
    }
});

jsFiddle

Answer 5

最简单和最短（使用jQuery）

$("#add").on("click", function () {
    var div = $(".wrapper div").filter(":hidden");
    var hid = div.size(); // current number of hidden div
    div.first().fadeIn(); // show the first hidden
    hid == 1 ?  $(this).fadeOut() : null; // if we show the last
});

... 通知我将隐藏的div包装在父.wrapper选择器中（针对特异性）。

此方法的优点是您无需预先设置隐藏div的隐藏数量

注意：.on()需要jQuery 1.7 +

参见 JSFIDDLE

每次点击一个接一个地显示3个div

5 个答案: