Question

我尝试了很多解决方案，但似乎不适合我，任何人都可以帮我解决问题吗？

我想将GPS车队管理系统值更改为textarea。

这是我的代码：

<div class="caption">
  <i class="fa fa-reorder"></i>GPS Fleet Managment System
</div>
<a href="#" id="change">Change</a>

var textbox = $("#caption");
var textarea = $("<textarea id='textarea'></textarea>");
$("#change").click(function () {
   textbox = textbox.value(textarea);
});

Answer 1

将value更改为html，添加e.preventDefault()并将#caption选择器更改为.caption：

var textbox = $(".caption");
var textarea = $("<textarea id='textarea'></textarea>");
$("#change").click(function (e) {
    e.preventDefault();
    textbox.html(textarea);
});

Answer 2

另一种方法可能是：

$(function () {
  var textbox = $("#caption");
  var textarea = $("<textarea id='textarea'></textarea>");

  $("#change").click(function (e) {
    var ele = document.getElementsByClassName('caption')[0].childNodes[2];
    document.getElementsByClassName('caption')[0].replaceChild(textarea[0], ele);

  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="caption">
    <i class="fa fa-reorder"></i>GPS Fleet Managment System
</div>
<a href="#" id="change">Change</a>

Answer 3

使用e.preventDefault()来阻止默认点击事件，使用textarea.val();

来获取textarea值

var textbox = $(".caption");
var textarea = $("<textarea id='textarea'></textarea>");
$("#change").click(function (e) {
        e.preventDefault();
        console.log(textarea.val());
        //to add the textare to the page use append() or html()
       textbox.append(textarea); 
});

Answer 4

如果要用textarea替换div，请使用http://api.jquery.com/replaceWith/。您的var textbox = $("#caption");应为.caption，因为您的元素包含一类标题，而不是ID。

textbox.replaceWith(textarea);

Javascript DOM控制台浏览器

4 个答案: