jquery - 制作将切换 textarea 位置的 onClick 功能

Question

我有以下代码：

      var counter=0; 
     function appendText(){     
     var text = $("#text").val();
if ($("#text").val()){      

var textArea = "<div> <textarea id='t"+counter+"'>"+text+
    "</textarea><button id='b"+counter+"' name='t"+counter+"' >edit</button> <button onClick='moveUp();'>Up</button></div>"; 


    $("#addedText").after(textArea);    
    $("#t"+counter).attr('readonly','readonly');    
    $("#t"+counter).attr('readonly','readonly');

    $("#t"+counter).css('width','500px');
$("#t"+counter).css('resize','none');
$("#t"+counter).css('background-color','#5CCCCC'); 
$("#t"+counter).css('font-weight','bold');             

$("#b"+counter).bind('click',makeAreaEditable);                  
counter++;  }   else{   }            };                                                                 


 var makeAreaEditable = function() {
 var target = event.target||event.srcElement||event.originalTarget;     
 var targetArea =$("#"+target.name);    
 targetArea.removeAttr('readonly');     
 var button =  $("#"+target.id);    
 button.text("OK");     
 button.unbind('click');
 button.bind('click',saveEdit); };

  var saveEdit =  function() {  
  var target = event.target || event.srcElement || event.originalTarget;    
  var button =  $("#"+target.id);   
  button.text("edit");  
  button.unbind('click');
  button.bind('click',makeAreaEditable);    
  var targetArea = $("#"+target.name);  
  targetArea.attr('readonly', 'readonly'); };

我不知道如何制作 moveUp() 函数，以便它将 textarea 向上移动一个空格。之前的文本区域应该与您按下向上按钮的文本区域交换位置。

html 看起来像这样：

 <textarea id="text" placeholder="baga text aici"></textarea> <button
 id="addText" onClick="appendText()" >Add text </button>        <div
 id="addedText" style="float:left"></div>

Answer 1

$(".moveup").on("click",function()   {
       var $divcontainer = $(this).parent();            
      if ( $divcontainer.prev().get(0))  $divcontainer.prev().before($divcontainer);

      });
//append whatever how many textarea & its up button in div.allthetextarea

html

 <div class="allthetextarea">
      <div><textarea/><input class="moveup"/></div>
      <div><textarea/><input class="moveup"/></div>
   ...
</div>

css

      .allthetextarea .moveup:first-child {display:none;}