Question

＆＃13;

$(document).ready(function() {
  $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

function editable_text_clicked() {
  var div_text = $(this).html();
  var text_div = $("<textarea />");
  text_div.val(div_text);
  $(this).replaceWith(text_div);
  text_div.focus();
  text_div.blur(text_divBlurred);
}



function blurred(argument) {
  var html = $(this).val();
  var viewableText = $(".editable_text p");
  viewableText.html(html);
  $(this).replaceWith(viewableText);
  // setup the click event for this new div
  viewableText.click(editable_text_clicked);
}
$(document).ready(function() {
  $(".btn").click( function(){
    $("editable_text").(editable_text_clicked);
  })
});

＆＃13;

p, textarea{
  margin: 20px;
  padding: 15px;
  border: 1px solid #ccc;
  width: 300px;
}
.btns{
  width:300px;
  margin:20px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="editable_text">
  <p>
    Lorem Ipsum Content Comes here...
  </p>
  <div class="btns">
    <a href="#edit" class="btn btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a>
    <a href="#update" class="btn btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a>
  </div>
</div>

＆＃13;

＆＃13; 我在JS方面很差，但是sill想要学习它，我今天的任务是创建一个 To Do List ，所以这就是我想要的。当我点击铅笔图标时，p中的.editable_text应该进行修改，编辑完成后点击“正常”时，文字应附加到p中的.editable_text

这里是小提琴链接，https://jsfiddle.net/zeasts/nfL7qcak/8/

Answer 1

更新下面提到的代码。当用户点击编辑按钮 - textarea将显示内容，并且用户将点击保存p标签将显示内容它将起作用，你可以在这里看到 - https://jsfiddle.net/mf8wp3wf/：

<div class="editable_text">
<div id="dynamic-div">
  <p id="content-data">
    Lorem Ipsum Content Comes here...
  </p>
</div>

<div class="btns">
    <a href="#edit" class="btn edit-text btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a>
    <a href="#update" class="btn update-text btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a>
  </div>
</div>


$(document).ready(function() {
  $("body").tooltip({ selector: '[data-toggle=tooltip]' });

  $(".edit-text").click( function(){ 
     var content = $("#content-data").html();
     $("#dynamic-div").html("<textarea id='content-area'>"+content+"</textarea>");
  });

  $(".update-text").click( function(){ 
    var text_date = $("#content-area").val();
    $("#dynamic-div").html("<p id='content-data'>"+text_date+"</p>");
  });


});

Answer 2

没有功能的快速解决方案。添加模糊和禁用按钮onclick事件。

$(document).ready(function() {
  $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});




$(document).ready(function() {

 $("#edit").click( function(){
  
  if($('.editable_text').css('display')=='block'){ 
 var text=$('.editable_text').text();
$('.editable_text').css('display','none');
$('#textarea_text').css('display','block').val(text).focus(); 
}
  })
  
$("#update").click( function(){
 
 if($('#textarea_text').css('display')=='block'){ 
  var val=$('#textarea_text').val();
$('.editable_text').css('display','block').text(val);
$('#textarea_text').css('display','none');   
}
 
 })
  


});

p, textarea{
  margin: 20px;
  padding: 15px;
  border: 1px solid #ccc;
  width: 300px;
}
.btns{
  width:300px;
  margin:20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


   <div>
  <p class="editable_text">Lorem Ipsum Content Comes here... </p>
  <textarea id="textarea_text" style="display:none"></textarea>
  </div>
  <div class="btns">
<a id="edit" href="#edit" class="btn btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a>
<a id="update" href="#update" class="btn btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a>
  </div>

Answer 3

您的代码中有一些错误检查您的控制台。

至于编辑，你可以这样做：

$("[href='#edit']").click(function(){
    $(".editable_text").attr("contenteditable", "true").focus();
});

$("[href='#update']").click(function(){
    $(".editable_text").attr("contenteditable", "false");
});

Here is ur updated JSFiddle

在我的演示中，我通过href属性识别了元素。您始终可以向其添加新类或使用唯一ID。

另请注意，当您想按类引用元素时，请不要忘记 dot infront $(".editable_text")

Answer 4

它可以非常简单，请查看：

$(document).ready(function() {
  $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

$('#update').on('click', function(){
  $('#result').append('<li>' + $('#myText').val() + '</li>');
  $('#myText').val("").attr("disabled", "disabled");
});

$('#edit').on('mouseup', function(){
  console.log( $('#myText') );
  $('#myText').attr("disabled", false).focus().select();
});

input{
  margin: 20px;
  padding: 15px;
  border: 1px solid #ccc;
  width: 300px;
}
.btns{
  width:300px;
  margin:20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="editable_text">
  <input type='text' disabled id="myText" placeholder="Lorem Ipsum Content Comes here..."/>

  <div class="btns">
    <a href="#edit" id="edit" class="btn btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a>
    <a href="#update" id="update" class="btn btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a>
  </div>
  <br><br><br><br>
  TODO LIST: 
  <div id="result"></div>
</div>

在更新段落中的文本后单击段落到Textarea

4 个答案: