Question

当我在第二个Textarea字段中编写并单击提交时，它将仅保存第一个textarea字段，而不是第二个。我不知道如何将按钮连接到其相应的textarea字段。

<div class="time-block">
  <div class="row">
    <div class="col-1">
      <p class='hour'>9AM</p>
    </div>
    <div class="col-10">
      <div class='input-group'>
        <textarea class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
        <div class="past"></div>
        <div class="present"></div>
        <div class="future"></div>
      </div>
    </div>
    <div class="col-md-1">
      <button class="input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
    </div>
  </div>
  <div class="time-block">
    <div class="row">
      <div class="col-1">
        <p class='hour'>10AM</p>
      </div>
      <div class="col-10">
        <textarea class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
        <div class="past"></div>
        <div class="present"></div>
        <div class="future"></div>
      </div>
      <div class="col-md-1">
        <button class=" input-group-addon input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
      </div>
    </div>

这是我的代码

$(".saveBtn").on('click',function (event){
    event.preventDefault();

    if ($("textarea").val() !== "") {    
      alert('saved');
      alert($("textarea").val());
      var textField = $('textarea').val();
      localStorage.setItem("textField", textField); 
    }
});

Answer 1

您需要检查所有文本区域中的值。因此，遍历所有文本区域，然后检查该值。如果该值不是空字符串，则用变量将其连接起来

$(".saveBtn").on('click', function(event) {
  event.preventDefault();
  var textField = '';
  $('textarea').each(function(a, b) {
    if ($(this).val() !== '') {
      textField += $(this).val();
    }
  })
  localStorage.setItem("textField", textField);


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="time-block">
  <div class="row">
    <div class="col-1">
      <p class='hour'>9AM</p>
    </div>
    <div class="col-10">
      <div class='input-group'>
        <textarea class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
        <div class="past"></div>
        <div class="present"></div>
        <div class="future"></div>
      </div>
    </div>
    <div class="col-md-1">
      <button class="input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
    </div>
  </div>
  <div class="time-block">
    <div class="row">
      <div class="col-1">
        <p class='hour'>10AM</p>
      </div>
      <div class="col-10">
        <textarea class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
        <div class="past"></div>
        <div class="present"></div>
        <div class="future"></div>
      </div>
      <div class="col-md-1">
        <button class=" input-group-addon input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
      </div>
    </div>

Answer 2

使用$("textarea").val()时，它将使用第一个textarea的val。这与.text()（在非输入项上）不同，后者将它们全部合并。

演示：

console.log($("textarea").val())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea>x</textarea>
<textarea>y</textarea>
<button type='button'>click</button>

如何将按钮连接到其适当的文本区域

在您的情况下，您需要找到与相关的文本区域，可以通过一些导航/ DOM遍历来做到这一点：

var textarea = $(this).closest(".time-block").find("textarea")

更新的代码段：

$(".saveBtn").on('click', function(event) {
  event.preventDefault();

  var txt = $(this).closest(".time-block").find("textarea");

  if (txt.val() !== "") {

    console.log('saved');
    console.log(txt.val());

    var value = txt.val();
    //localStorage.setItem("textField", value);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="time-block">
  <div class="row">
    <div class="col-1">
      <p class='hour'>9AM</p>
    </div>
    <div class="col-10">
      <div class='input-group'>
        <textarea class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
        <div class="past"></div>
        <div class="present"></div>
        <div class="future"></div>
      </div>
    </div>
    <div class="col-md-1">
      <button class="input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
    </div>
  </div>
  <div class="time-block">
    <div class="row">
      <div class="col-1">
        <p class='hour'>10AM</p>
      </div>
      <div class="col-10">
        <textarea class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
        <div class="past"></div>
        <div class="present"></div>
        <div class="future"></div>
      </div>
      <div class="col-md-1">
        <button class=" input-group-addon input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
      </div>
    </div>

Answer 3

因此，有两个文本区域，您必须循环才能获取值

$(".saveBtn").on('click',function (event){
event.preventDefault();
  let text_empty=1;
  $("textarea").each(function() {
      if($(this).val()==""){
         text_empty =0;
   }
 });
if (text_empty==0) {

 //alert('saved');
 //alert($("textarea").val());
    var no_of_text = 0;
   $("textarea").each(function(){
        var textField = $(this).val();

        localStorage.setItem("textField"+no_of_text, textField); 
   });

} }）;

Answer 4

您可以尝试使用此FIDDLE并尝试解决方法

 $(".saveBtn").on('click',function (){
 var textField="";
event.preventDefault();

if ($("textarea").val() != "") {

  $('textarea').each(function() {
if ($(this).val() != '') {
  textField += $(this).val();
}
  })
alert(textField)
localStorage.setItem("textField", textField);

提交按钮功能遇到问题

4 个答案: