如何替换li文本但保留其子元素？

时间：2017-11-02 11:17:47

标签： javascript jquery html css

我尝试在编辑卡上执行某些功能，例如Trello卡，即提供一些选项，提示您编辑，移动或复制卡片。

我这样做的示例代码就像这样

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('i').click(function() {
    text = $(this).parentsUntil('ul').text();
    $('body').addClass('bckg');
    console.log(text);
    // alert(text);
    $(this).parentsUntil('li').append('<textarea class="textarea">' + text + '</textarea><ul class="opts"><li><a href="#">Edit</a></li><li><a href="#">change icon</a></li><li><a href="#">delete</a></li></ul><br><br><br><button class="btn btn-success">Save</button>');
  });
  $('body').on('blur', 'textarea', function() {
    textarea = $(this).val()
    $(this).parentsUntil('ul').text(textarea);
    $(this).remove();
    // $(this).sibling('button').remove();
    $('body').removeClass('bckg');
    console.log(textarea);
  })
})
＆＃13; 
.textarea {
  position: absolute;
  left: 0px;
  z-index: 100;
  float: left;
}

.opts {
  position: absolute;
  left: 150px;
  top: 0px;
  z-index: 100;
  list-style-type: none;
  /*background: #FFF;*/
}

.opts li {
  padding: 15px;
  background: rgba(0, 0, 0, .8);
}

.bckg {
  background: rgba(0, 0, 0, .6);
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<ul>
  <li style="position: relative;">Option1 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
  <li style="position: relative;">Option2 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
  <li style="position: relative;">Option3 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
</ul>
＆＃13;
＆＃13;
＆＃13;

上面的脚本工作正常，因为我想用<li>中的文本替换<textarea>文本，但问题出在jQuery事件.blur()之后我丢失了编辑图标{{我将事件处理程序绑定到它。因此我无法从第二次开始调用它。如何更改文本并使用其事件处理程序保持编辑图标？感谢。

2 个答案:

答案 0 :(得分：1)

这将帮助您嵌套ul; 

$(document).ready(function() {
 
})
var child;
 $('body').on('click','i',function() {
   $('body').addClass('bckg');
   var text = $(this).closest("li").clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();
    child = $(this).closest("li").children();
    $(this).closest("li").append('<textarea class="textarea">' + text + '</textarea><ul class="opts"><li><a href="#">Edit</a></li><li><a href="#">change icon</a></li><li><a href="#">delete</a></li></ul><br><br><br><button class="btn btn-success">Save</button>');
  });
  
  $('body').on('blur', 'textarea', function() {
    textarea = $(this).val()
    var appendItem =  textarea;
  $(this).closest("li").text('').empty().append(appendItem).append(child);

    $('body').removeClass('bckg');
  })
.textarea {
  position: absolute;
  left: 0px;
  z-index: 100;
  float: left;
}

.opts {
  position: absolute;
  left: 150px;
  top: 0px;
  z-index: 100;
  list-style-type: none;
  /*background: #FFF;*/
}

.opts li {
  padding: 15px;
  background: rgba(0, 0, 0, .8);
}

.bckg {
  background: rgba(0, 0, 0, .6);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<ul>
 <li style="position: relative;">Option1 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a> <ul> <li style="position: relative;">Option1 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li> </ul> </li>
</ul>

答案 1 :(得分：0)

检查以下解决方案，

$(document).ready(function() {
 
})

 $('body').on('click','i',function() {
   $('body').addClass('bckg');
   var text = $(this).parent().parent().text();
    $(this).parent().parent().append('<textarea class="textarea">' + text + '</textarea><ul class="opts"><li><a href="#">Edit</a></li><li><a href="#">change icon</a></li><li><a href="#">delete</a></li></ul><br><br><br><button class="btn btn-success">Save</button>');
  });
  
  $('body').on('blur', 'textarea', function() {
    textarea = $(this).val()
    var appendItem =  textarea + '<a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a>'
    
    $(this).parent().text('').empty().append(appendItem);

    $('body').removeClass('bckg');
  })
.textarea {
  position: absolute;
  left: 0px;
  z-index: 100;
  float: left;
}

.opts {
  position: absolute;
  left: 150px;
  top: 0px;
  z-index: 100;
  list-style-type: none;
  /*background: #FFF;*/
}

.opts li {
  padding: 15px;
  background: rgba(0, 0, 0, .8);
}

.bckg {
  background: rgba(0, 0, 0, .6);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<ul>
  <li style="position: relative;">Option1 
    <a href="JavaScript:void(0)">
      <i class="fa fa-pencil" aria-hidden="true"></i>
    </a>
  </li>
  
  <li style="position: relative;">Option2 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
  <li style="position: relative;">Option3 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
</ul>

相关问题
最新问题