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必须是对classname的唯一更改
不要替换a标记，只需更改图标的类。
使用span轻松定位h3
使用类作为标志来了解它是编辑还是保存

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

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

另一个问题是将元素 a href 替换为另一个元素，而后续代码则取决于原始元素。刚刚更改了JQuery代码的顺序，因此它按逻辑顺序执行。

最后， a 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>

将文本标签替换为不与replaceWith（）一起使用的输入字段

4 个答案: