DEMO

Question

我有类似下面的PHP代码：

foreach ($questions as $q){
    foreach ($answers as $a)
    {
        echo '<input type="text" id="'.$a['question_id'].'_'.$a['id_answer'].'" value="'.$a['answer'].'" />';

        echo '<div id="newAnswerTextBox'.$a['question_id'].'">';
    }
    echo '<button id="addNewAnswer'.$q['id_question'].'">Add new answer</button>';
}

示例性输出：

<input type="text" id="1_1" value="question1 answer1">
<input type="text" id="1_2" value="question1 answer2">
<input type="text" id="1_3" value="question1 answer3">
<div id="newAnswerTextBox1">
<button id="addNewAnswer1">Add new answer</button>

<input type="text" id="2_4" value="question2 answer4">
<input type="text" id="2_5" value="question2 answer5">
<input type="text" id="2_6" value="question2 answer6">
<div id="newAnswerTextBox2">
<button id="addNewAnswer2">Add new answer</button>

单击第一个按钮“添加新答案”后，

所需的额外输入：

<input type="text" id="1_4" value=" ">

主要问题是如何通过jquery添加新的输入框。我找不到类似的解决方案，我正在学习jquery。

我在下面找到了这个，但我需要在右侧div中添加动态输入。

var num = 0;
$("#addNewAnswer").click(function() {
    num++;
    $("#newAnswerTextBox").html("<input type=\"text\" id=\"" + num + "\" />");
});

Answer 1

首先给所有按钮一个普通的类说add_answer

第二次单击按钮时，将文本框添加到其父div中，如下所示

var num = 0;
$(".add_answer").click(function() {
    num++;
    $(this).parent().append("<input type=\"text\" id=\"" + num + "\" />");
});

Answer 2

只需添加告诉javascript使用PHP输入的最后一个数字：

foreach ($questions as $q){
    foreach ($answers as $a)
    {
        echo '<input type="text" id="'.$a['question_id'].'_'.$a['id_answer'].'" value="'.$a['answer'].'" />';

        echo '<div id="newAnswerTextBox'.$a['question_id'].'">';
    }
    echo '<script type="text/javascript">var num'.$q['id_question'].' = '.count($answers).';';
    echo '<button id="addNewAnswer'.$q['id_question'].'">Add new answer</button>';
}

或类似的东西......

祝你好运：）

Answer 3

首先，您必须关闭“newAnswerTextBox”div。替换以下行：

echo '<div id="newAnswerTextBox'.$a['question_id'].'" />';

solution of jimy就好了。

Answer 4

$("button[id^='addNewAnswer']").click(function(){
  var p = new RegExp(".*?(\\d+)",["i"]);
  var questionID = parseInt(p.exec(this.id)[1]);
  var answerID = parseInt($("input[id^='"+questionID+"_']:last").attr("id").split("_")[1]);
  answerID++;
  var newTextBoxID = questionID +"_"+answerID;   
$("<input/>").attr({"type":"text","id":newTextBoxID}).insertBefore("#newAnswerTextBox"+questionID);
});

如何通过jQuery在动态div中添加非常动态的输入

4 个答案:

DEMO