-1

+ Add Moreリンクをクリックするたびに3つのdivを1つずつ表示するのに助けが必要です+ 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を生成したくないので、display:blockクリックするたびに既存のdivを作成する必要があります。

ありがとう

4

5 に答える 5

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 に答える
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 に答える
0

fadeIn()メソッド ( http://api.jquery.com/fadeIn/を参照)を使用して JQuery を使用してスムーズなアニメーションを作成し、メソッドを使用してボタンを非表示にすることができます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();
    }
});

jsフィドル

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

...非表示を親セレクターでラップしたことに注意してください（具体化のため）。div.wrapper

この方法の利点は、div存在する非表示の数を事前に設定する必要がないことです。

注：.on()jQuery 1.7+が必要です

JSFIDDLEを参照してください

于 2013-02-18T08:52:27.627 に答える