javascript - 在每个文本字段后插入文本区域

Question

下面是html

<input type="text" id="textbox1" />
<input type="text" id="textbox2" />
<input type="text" id="textbox3" />
<input type="text" id="textbox4" />
<a href="#" id="change">Change</a>
<a href="#" id="change1">Change1</a>

我们在下面的代码

var textbox = $("input[type='text']");
var textarea = $("<textarea id='textarea' rows='10' cols='35'></textarea>");
$("#change").click(function () {

    $("input[type='text']").each(function( index ) {
      $(this).hide();
      $(textarea).insertAfter(this);
    });
});

$("#change1").click(function () {

    $('textarea').remove();
    $("input[type='text']").show();

});

Answer 1

您不需要使用 $()纯 HTML 选择器，如 <textarea id='textarea' rows='10' cols='35'></textarea>还有 insertAfter 的错误用法，在你的情况下最好使用 .after 。这是jsFiddle与解决方案。

var textbox = $("input[type='text']");
var textarea = "<textarea id='textarea' rows='10' cols='35'></textarea>";
$("#change").click(function () {

    $("input[type='text']").each(function( index ) {
    $(this).after(textarea);
      $(this).hide();
      
    });
});

$("#change1").click(function () {

    $('textarea').remove();
    $("input[type='text']").show();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="textbox" />
<input type="text" id="textbox" />
<input type="text" id="textbox" />
<input type="text" id="textbox" />
<a href="#" id="change">Change</a>
<a href="#" id="change1">Change1</a>