Question

$(".button").on('click', function(){
  $(".updateCase").removeClass("hidden");
  var thisBtn = $(this);
  //$(this).parent( "li" ).find("h1").toggleClass( "red" );
  var currentText = thisBtn.parent( "li" ).find(".textdata").text();
  thisBtn.parent( "li" ).find("h1").replaceWith('<input name="test" class="editedText" type="text" value="' + currentText + '">');
  thisBtn.addClass("hidden");  
  $(".updateCase").on('click', function(){
  var inputT = $(".editedText");
    var editedTextValue = $(".editedText").val();
    $(".button").removeClass("hidden");
    $(".updateCase").addClass("hidden");
    var save = function(){
    var $p = $($input.data()["tagName"]).text( inputT.val() ).addClass(inputT.attr("class"));
    inputT.replaceWith( $p );
  };
      inputT.one('blur', save).focus();
      $(".updateCase").parent( ".container" ).find("input").replaceWith('<h1  class="textdata">' + editedTextValue + ' </h1>');
  })

})

.red{
  color: pink;
}
li{
  list-style: none;
  width: 100%;
  padding: 15px;
  height:50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <li>
    <button class="button btn btn-warning pull-right">clicked</button>
    <h1 class="textdata">First</h1>
  </li>
   <li>
    <button class="button btn btn-warning pull-right">clicked</button>
    <h1 class="textdata">Second</h1>
  </li>
   <li>
    <button class="button btn btn-warning pull-right">clicked</button>
    <h1 class="textdata">Third</h1>
  </li>
   <li>
    <button class="button btn btn-warning pull-right">clicked</button>
    <h1 class="textdata">Fourth</h1>
  </li>
  <hr>
  <button class="updateCase btn btn-success hidden">
  Update
  </button>
</div>

你好，

我尝试将<h1>转换为<input>并对其进行编辑，当我点击更新Button时，我无法正常保存所有内容，它将所有内容保存为一个值。但是，如果我单独保存，它可以正常保存，但所有人都无法保存。以下是我试过的代码。

以下是jsFiddle链接： Fiddle Link

Answer 1

试试这项工作：

 $(".button").on('click', function () {

            $(".updateCase").removeClass("hidden");
            var thisBtn = $(this);
            //$(this).parent( "li" ).find("h1").toggleClass( "red" );
            var currentText = thisBtn.parent("li").find(".textdata").text();
            thisBtn.parent("li").find("h1").replaceWith('<input name="test" class="editedText" type="text" value="' + currentText + '">');
            thisBtn.addClass("hidden");

            $(".updateCase").on('click', function () {

                $(".editedText").each(function () {
                    var inputT = $(this);
                    var editedTextValue = $(this).val();

                    var save = function () {
                        var $p = $($input.data()["tagName"]).text(inputT.val()).addClass(inputT.attr("class"));
                        inputT.replaceWith($p);
                    };

                    inputT.one('blur', save).focus();

                    $(this).replaceWith('<h1  class="textdata">' + editedTextValue + ' </h1>');
                });

                $(".button").removeClass("hidden");
                $(".updateCase").addClass("hidden");

            })
        })

.red{
  color: pink;
}
li{
  list-style: none;
  width: 100%;
  padding: 15px;
  height:50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <li>
    <button class="button btn btn-warning pull-right">clicked</button>
    <h1 class="textdata">First</h1>
  </li>
   <li>
    <button class="button btn btn-warning pull-right">clicked</button>
    <h1 class="textdata">Second</h1>
  </li>
   <li>
    <button class="button btn btn-warning pull-right">clicked</button>
    <h1 class="textdata">Third</h1>
  </li>
   <li>
    <button class="button btn btn-warning pull-right">clicked</button>
    <h1 class="textdata">Fourth</h1>
  </li>
  <hr>
  <button class="updateCase btn btn-success hidden">
  Update
  </button>
</div>

Answer 2

您需要更改以下内容： $（$ input.data（）[“tagName”]）到$（“：输入”）

Answer 3

var inputT = $(".editedText");

这将返回一个元素数组，因此您必须循环它。所以你可以获取单个元素的值，如

for(var i = 0; i<inputT.length; i++){
var editedTextValue = inputT[i];
console.log(editedTextValue.value);
}

它可以帮助您解决问题。

OnClick一起更新所有列表

3 个答案: