-1

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

<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，我需要display:block在每次点击时生成现有的 div。

谢谢

4

5 回答 5

2

如果您将使用 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/

于 2013-02-18T08:08:25.243 回答
2

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

演示

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

    };
}
于 2013-02-18T08:24:08.273 回答
0

您可以使用 JQuery 获得流畅的动画，使用fadeIn()方法（请参阅http://api.jquery.com/fadeIn/），然后使用方法使您的按钮消失fadeOut()。

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

于 2013-02-18T08:02:36.090 回答
0

在这里你可以看到我是怎么做到的

<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

于 2013-02-18T08:08:38.163 回答
0

最简单最短的（用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
});

...请注意，我将 hidden 包装div在父.wrapper选择器中（为了具体起见）。

这种方法的好处是你不需要预先设置多少隐藏div存在

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

见JSFIDDLE

于 2013-02-18T08:52:27.627 回答