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" />

我有一个按钮，使用此功能克隆并增加当前输入字段。

这是递增我当前输入字段的函数，但我还需要增加Answer＃。

$('#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);

我的问题是我需要增加新输入字段中的文本，使其每次克隆时动态递增1。我几个小时一直在墙上撞墙，但我希望它不是一些简单的php var。请帮助我：〜）

Answer 1

我在这里用你的javascript告诉你在做什么有点困难，因为我无法在任何地方看到id 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>

Answer 2

这是一个有效的小提琴，我想你正在尝试做什么：

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

Jquery输入复杂的递增混乱

2 个答案: