将文本标签替换为无法使用 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

您可以通过以下方式改进代码：

• 不要对按钮使用相同的id，因为 ID 必须是唯一的 更改类名
• 不要替换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 3

这是因为 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 4

首先，通过子元素更改父元素是有问题的。解决方案是将要更改的文本放在另一个占位符元素(如span(中，然后将其替换为所需的输入元素。

另一个

问题是用另一个元素替换元素 href，而后续代码依赖于原始元素。只是更改了 JQuery 代码的顺序，使其按逻辑顺序执行。

最后，href 的 id 是相同的。请改用类。

    
    $('.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>