jquery輸入複雜增加混亂

Question

我有這個輸入，有文本，當你點擊它，文本消失，但如果你沒有輸入任何文字將回來。

<input type="button" id="btnAdd" value="Add Answer" /> 
<input type="text" id="forminput" class="clonedInput" onclick="this.value='';" 
onfocus="this.select()"onblur="this.value=!this.value?'Answer 1 
':this.value;" value="Answer 1" /> 

我有一個按鈕，可以使用此功能克隆和增加當前輸入字段。

這是增加我當前輸入字段的函數，但我也需要遞增答案＃。

$('#btnAdd').click(function() { 
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have 
var newNum = new Number(num + 1); // the numeric ID of the new input field being added 

// create the new element via clone(), and manipulate it's ID using newNum value 
var newElem = $('#formanswer' + num).clone().attr('id', 'formanswer' + newNum); 

// manipulate the name/id values of the input inside the new element 
newElem.children(':first').attr('id', 'formanswer' + newNum).attr('value','Answer '+newNum); 

// insert the new element after the last "duplicatable" input field 
$('#formanswer' + num).after(newElem); 

我的問題是，我需要增加新的輸入字段內的文本，使其每次克隆時動態增加一個。我一直在牆上靠着我的頭幾個小時，但我希望它不是一些簡單的PHP變種。 plz幫我：〜）

Answer 1

這裏是它的工作小提琴，我認爲做你嘗試什麼：

http://jsfiddle.net/R2tFz/

對於後人，這裏是我創建的JavaScript：

$(function() { 

$('#btnAdd').click(function() { 
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have 
//clone the last field  

var newNum = num + 1; // the numeric ID of the new input field being added 

    var newElem = $('#formanswer' + num).clone().attr('id', 'formanswer' + newNum); 

// create the new element via clone(), and manipulate it's ID using newNum value 

// manipulate the name/id values of the input inside the new element 
$("input", newElem).attr('name', 'formanswer' + newNum).val('Answer ' + newNum); 

// insert the new element after the last "duplicatable" input field 
newElem.insertAfter($('#formanswer' + num)); 

}); 


    $(".clonedInput").live('blur', function() { 
    var num = $(this).attr('name').replace('formanswer', ''); 
    $(this).val((!$(this).val().length)?('Answer '+num):$(this).val()); 
    }); 
}); 

Answer 2

這裏有點難以告訴你在做什麼你的JavaScript在這裏，因爲我看不到任何地方的編號formanswer，我不知道你的HTML除了事實你有一個帶有一些事件屬性的輸入。

因此，我不能測試你的代碼，所以寫了我自己的快速解決方案。我希望它能幫助你。

它做我認爲你希望它做的事（按鈕在最後一個創建一個新的輸入，並增加佔位符文本和ID屬性中的數字）。

對不起，如果我誤解了。

<input type="button" class="add" value="Add Input" /> 
<div id="container"> 
    <input type="text" id="form_answer_1" class="answer_input placeholder" title="Answer 1" /> 
</div> 

<script> 
    $(function() { 
     placeholder(); 

     $('.add').click(function() { 
      var count = $('.answer_input').size() + 1; 
      $('#container').append('<input type="text" id="form_answer_' + count + '" class="answer_input placeholder" title="Answer ' + count + '" />'); 
      placeholder(); 
     }); 
    }); 

    function placeholder() { 
     $('.placeholder').each(function() { 
      $(this).val($(this).attr('title')); 
      $(this).css({'color': '#777'}) 
      $(this).focus(function() { 
       if($(this).val() == $(this).attr('title')) { 
        $(this).val(''); 
       } 

       $(this).css({'color': '#000'}); 
      }); 

      $(this).blur(function() { 
       if($(this).val() == '') { 
        $(this).val($(this).attr('title')); 
        $(this).css({'color': '#777'}); 
       } 
      }); 
     }); 
    } 
</script>