Question

我希望以可排序的顺序获取所有textarea内容并插入其他textarea：

选项1 ：$（“div textarea”）。val（）;

选项2 ：$（“div textarea”）。text（）;

问题：

选项1 ：使用新输入更新val，但仅从div＃1获取val

选项2 ：全部按可排序顺序排列，但不使用新输入更新

代码：

$(function() {

$( "#sortable" ).sortable({
      out: function( event, ui ) {change();}
});


function change(){ 

         var content = "";

         $("#result textarea").empty();
         $("#sortable" ).sortable('toArray', {attribute: 'value'});           

         //content = $("div textarea").text(); // get all, but no update
         //content = $("div textarea").val(); // get only val from #1

         $("#result textarea").text(content); 

}

});

<ul id="sortable">
    <div id="1" value="1">
        <textarea rows="4" cols="50">01---</textarea>
    </div>
    <div id="2" value="2">
        <textarea rows="4" cols="50">02---</textarea>
    </div>
    <div id="3" value="3">
        <textarea rows="4" cols="50">03---</textarea>
    </div>
    <div id="4" value="4">
        <textarea rows="4" cols="50">04---</textarea>
    </div>
</ul>

    <div id="result" value="result">
        <textarea rows="4" cols="50"></textarea>
    </div>

Answer 1

将out更改为stop，以便在排序停止时触发更改，这将使调用更新列表，使用content = $("div textarea").text();来编写文本

$(function() {
  $("#sortable").sortable({
    stop: function(event, ui) {
      change();
    }
  });

  $("#sortable textarea").on('change keyup paste', change);

  function change() {
    var content = "";

    $("#result textarea").empty();
    $("#sortable").sortable('toArray', {
      attribute: 'value'
    });

    $("div textarea").each(function() {
      content += this.value;
    });

    $("#result textarea").text(content);
  }
});

<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul id="sortable">
    <div id="1" value="1">
        <textarea rows="4" cols="50">01---</textarea>
    </div>
    <div id="2" value="2">
        <textarea rows="4" cols="50">02---</textarea>
    </div>
    <div id="3" value="3">
        <textarea rows="4" cols="50">03---</textarea>
    </div>
    <div id="4" value="4">
        <textarea rows="4" cols="50">04---</textarea>
    </div>
</ul>

    <div id="result" value="result">
        <textarea rows="4" cols="50"></textarea>
    </div>
</body>
</html>

Answer 2

我发现.text（）只能一次更新textarea，所以.val（）是要走的路。键入textarea并查看它不会更改html，但会更改val。

也许您没有正确获取内容，因此请使用console.log进行测试。也许你需要遍历每个textarea，并将val附加到你的内容var。

以可排序的顺序获取所有textarea内容

2 个答案: