將文本標籤替換爲不與replaceWith（）工作的輸入字段

Question

這只是一個簡單的編輯。我想改變標題，所以如果我要點擊「編輯」圖標，那麼標題將變爲文本框，「編輯」圖標將變爲「保存」圖標。

 
 
    $('#editheader').click(function(e){ 
 

 
     var category = $(this).closest("h3").text();   
 

 
     $(this).replaceWith("<a href=''> <i class='fa fa-save' aria-hidden='true' style='color:green'></i> </a>" ); 
 
     $(this).closest("h3").replaceWith("<input value='" + category + "' >");   
 

 
     e.preventDefault(); 
 
    });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3 class="panel-title"> Letters To Investors 
 
    <a href="#" id="editheader"> 
 
     <i class="fa fa-pencil" aria-hidden="true" style="color:green"></i> 
 
    </a> 
 
</h3> 
 

 
<h3 class="panel-title"> Tax Documents 
 
    <a href="#" id="editheader"> 
 
     <i class="fa fa-pencil" aria-hidden="true" style="color:green"></i> 
 
    </a> 
 
</h3>

Answer 1

我追加的形式在我的HTML標籤，並取得了這一點。

$('#editheader').click(function(e){ 

     var category = $(this).closest("h3").text(); 

     $(this).hide(); 
     $(this).closest("h3").hide(); 

     $('#editForm').show(); 
     $('input[name=category]').val(category);  

     //$(this).replaceWith("<a href=''> <i class='fa fa-save' aria-hidden='true' style='color:green'></i> </a>" ); 
     //$(this).closest("h3").replaceWith("<input value='" + category + "' >");   

     e.preventDefault(); 
    }); 
</script> 

Answer 2

這是因爲replaceWith（）刪除您指的元素！ 只需切換線路即可解決此問題。

$('.editheader').click(function(e) { 
 
     e.preventDefault(); 
 

 
     let $h3 = $(this).closest("h3"); 
 
     let category = $(this).closest("h3").text(); 
 

 
     $h3.toggleClass('edit'); 
 

 
     if ($h3.hasClass('edit')) { 
 
      const newCategory = $h3.children('input').val(); 
 
      $h3.children('input').remove(); 
 
      $h3.children('span').text(newCategory); 
 
     } else { 
 
      $h3.children('span').text(''); 
 
      $h3.prepend("<input value='" + category + "' >"); 
 

 
      $(this).children('i').removeClass('fa-pencil').addClass('fa-save'); 
 
     } 
 
     });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3 class="panel-title"> 
 
    <span>Letters To Investors</span> 
 
    <a href="#" class="editheader"> 
 
    <i class="fa fa-pencil" aria-hidden="true" style="color:green"></i> 
 
    </a> 
 
</h3> 
 

 
<h3 class="panel-title"> 
 
    <span>Tax Documents</span> 
 
    <a href="#" class="editheader"> 
 
    <i class="fa fa-pencil" aria-hidden="true" style="color:green"></i> 
 
    </a> 
 
</h3>

Answer 3

您可以提高你的代碼是這樣的：

• 不要使用相同的id的按鈕，因爲ID必須是類名
• 別唯一的變化t替換a標記，只需更改圖標的類。
• 使用span目標容易h3
• 使用的文字一類的標誌，知道它是編輯或保存

$('.editheader').click(function(e) { 
 
    if(!$(this).hasClass('save')){ 
 
    var category = $(this).siblings("span").text(); 
 
    $(this).siblings('span').replaceWith("<input value='"+category+"'/>"); 
 
    } else { 
 
    var category = $(this).siblings("input").val(); 
 
    $(this).siblings('input').replaceWith("<span>"+category+"</span>"); 
 
    } 
 
    $(this).toggleClass('save'); 
 
    $('i',this).toggleClass('fa-save fa-pencil'); 
 
    e.preventDefault(); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3 class="panel-title"> 
 
    <span>Letters To Investors</span> 
 
    <a href="#" class="editheader"> 
 
    <i class="fa fa-pencil" aria-hidden="true" style="color:green"></i> 
 
    </a> 
 
</h3> 
 

 
<h3 class="panel-title"> 
 
    <span>Tax Documents</span> 
 
    <a href="#" class="editheader"> 
 
    <i class="fa fa-pencil" aria-hidden="true" style="color:green"></i> 
 
    </a> 
 
</h3>

Answer 4

首先，改變通過孩子的父元素是有問題的。解決方法是將您想要更改的文本放在另一個佔位符元素（如）範圍內，然後將其替換爲所需的輸入元素。

另一個問題是將元素替換爲另一個元素，而成功的代碼取決於原始元素。只是改變了JQuery代碼的順序，所以它按邏輯順序執行。

最後，和href的ID是相同的。改爲使用class。

 
 
    $('.editheader').click(function(e){ 
 

 
     var category = $(this).closest("h3").text();   
 

 
$(this).prev().replaceWith("<input type='text' value='" + category + "' >"); 
 
     $(this).replaceWith("<a href=''> <i class='fa fa-save' aria-hidden='true' style='color:green'></i> </a>" ); 
 
       
 

 
     e.preventDefault(); 
 
    });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3 class="panel-title"> <span>Letters To Investors</span> 
 
    <a href="#" class="editheader"> 
 
     <i class="fa fa-pencil" aria-hidden="true" style="color:green"></i> 
 
    </a> 
 
</h3> 
 

 
<h3 class="panel-title"> <span>Tax Documents</span> 
 
    <a href="#" class="editheader"> 
 
     <i class="fa fa-pencil" aria-hidden="true" style="color:green"></i> 
 
    </a> 
 
</h3>