2012-10-24 2 views
3

는 내가 가지고있는 코드입니다.숨기기 여기에 입력 버튼

을 클릭하면 입력 상자를 여러 개 추가하고 제출할 수 있기 때문에 입력 상자 옆에 제출 단추를 추가하고 싶지 않습니다. 당신이 클릭 한 후

는 HTML

<div id="left">  
    <div class="box"> 
    <div class="boxtitle"><span class="boxtitleleftgap">&nbsp;</span><span class="boxtitlebulk"><span class="boxtitletext">Folders</span><div style="float: right; margin-top: 4px;"><a href="#" onclick="javascript: AddFolder();"><div class="addplus">&nbsp;</div></a></div></span></div> 
     <div class="boxcontent"> 
     <form method="post" id="folderform" action="page.php?action=list-volunteer-apps" name="folderform"> 
      <a class="even" href="page.php?action=list-volunteer-apps&folder=2">Folder 2 <span class="text">(1)</span></a><a class="even" href="page.php?action=list-volunteer-apps&folder=1">Folder 1 <span class="text">(0)</span></a> 
      <div id="foldercontainer"><input type="submit" value="Add"></div> 
     </form> 
     </div> 
    </div> 
</div> 

jQuery를

function AddFolder() { 
    $('#foldercontainer').append('<input name="folder[]" type="text" size="20" />'); 
}​ 

답변

14

그냥 버튼 ID를주고,이

<input type="submit" id="addButton" value="Add" style="display: none;"> 

는 그 다음 show()의 jQuery 방법을 사용하여 숨겨진 시작합니다

$("#addButton").show(); 

http://jsfiddle.net/TcFhy/

1

내가 폴더에서 버튼을 이동 포장하고 새 폴더를 추가 할 때 표시하고 있습니다. 이렇게하면 새 폴더를 추가 할 때 버튼이 맨 아래에있게됩니다. 또한 인라인 스타일을 제거하고 클래스로 대체했습니다. 나는 밖으로 버튼을 이동

#addBtn { display: none;} 

:

$('#addBtn').show(); 

이 같은 CSS로 숨어 있어요 :

단지 AddFolder() 기능에 추가 버튼을 표시하는 데 사용됩니다 #foldercontainer, 이렇게하면 원하는대로 여러 폴더를 추가 할 때 항상 맨 아래에있게됩니다.

<div id="foldercontainer"></div> 
<input id="addBtn" type="submit" value="Add"> 

여기에 jsFiddle을 찾으십시오. http://jsfiddle.net/kmx4Y/1/

2

다음은이 작업을 수행 할 수있는 방법입니다.

http://jsfiddle.net/mori57/4JANS/

그래서, 당신의 HTML에 당신이있을 수 있습니다 : 또한, 이러한 입력 상자를 조금 만들기 위해 사용하는 방법을 정리

<div id="foldercontainer"> 
     <input id="addSubmit" type="submit" value="Add"> 
     <input id="folderName" name="folder[]" type="text" size="20" style="" /> 
    </div> 

과 CSS는 다음과 같을 수 있습니다

#foldercontainer #addSubmit { 
    display:none; 
} 
#foldercontainer #folderName { 
    display:none; 
    width: 120px; 
    background: #FFF url(http://oi47.tinypic.com/2r2lqp2.jpg) repeat-x top left; 
    color: #000; 
    border: 1px solid #cdc2ab; 
    padding: 2px; 
    margin: 0px; 
    vertical-align: middle; 
} 

이고 스크립트는 다음과 같을 수 있습니다.

// set up a variable to test if the add area is visible 
// and another to keep count of the add-folder text boxes 
var is_vis = false, 
    folderAddCt = 0; 

function AddFolder() { 
    if(is_vis == false){ 
     // if it's not visible, show the input boxes and 
     $('#foldercontainer input').show(); 
     // set the flag true 
     is_vis = true; 
    } else { 
     // if visible, create a clone of the first add-folder 
     // text box with the .clone() method 
     $folderTB = $("#folderName").clone(); 
     // give it a unique ID 
     $folderTB.attr("id","folderName_" + folderAddCt++); 
     // and append it to the container 
     $("#foldercontainer").append($folderTB); 
    } 
}​