每次點擊顯示3格的一格一格

-2

我需要一個幫助來逐個顯示3格的時候我點擊每次點擊+ Add More的鏈接，也有+ Add more鏈接在顯示第三格後消失。請幫我每次點擊顯示3格的一格一格

<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的每次點擊。

感謝

來源

2013-02-18 Ajeesh Joseph

HTTP ：//mattgemmell.com/2008/12/08/what-have-you-tried/ – iappwebdev 2013-02-18 08:02:58

什麼是困難的部分，附加一個eventlistener按鈕，從文檔中獲取正確的'div'，或者隱藏按鈕？ – Teemu 2013-02-18 08:09:23

如果你會使用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-18 08:08:25

這就是我需要的..它完美地工作。非常感謝 – 2013-02-18 08:29:13

您可以使用jQuery的流暢的動畫，使用fadeIn()方法（見http://api.jquery.com/fadeIn/），然後讓你的按鈕，方法消失。

如果你不想使用jQuery，嘗試使用document.getElementById(id).style.visibility="hidden" || "visible";

來源

2013-02-18 08:02:36 Bigood

在這裏你可以看到我是怎麼做它

<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-18 08:08:38 dinodsaurus

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

    }; 
}

來源

2013-02-18 08:24:08 MrCode

最簡單的和最短的（用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-18 08:52:27 JFK

@downvoter：謝謝，至少證明我錯了或留下評論。 – JFK 2013-02-18 16:32:32

每次點擊顯示3格的一格一格

回答

相關問題