Jquery 从输入字段中获取值并将它们显示在其他 3 个输入字段中

Question

在下面的代码中，当点击确定按钮时，它会在完成输入字段中获取值，并显示在 text1,text2,text3 输入字段中。 问题是现在所有 3 列都得到相同的值（即 hi100）。期望的结果是所有 3 列显示不同的结果，即 hi100、hello100、sup100、 我想知道我的代码出了什么问题。谢谢

if (typeof set == "undefined") {
  var set = $(".text").val();
}
$(".ok").on('click', function() {

  $(this).closest('tr').find(".text").val(set + $(this).closest('tr').find(".done").val());

});

<table>
  <tr>
 
    <td>
      <input type="button"  value="ok" class="ok"></td>
    <td>done<input type="text" value="100" class="done" \> </td>
    <td>text1<textarea class="text">hi</textarea> </td>
    <td>text2<textarea class="text">hello</textarea> </td>
    <td>text3<textarea class="text">sup</textarea> </td>

  </tr>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

Answer 1

将您的脚本更改为 -

$(".ok").on('click', function() {
    var set = $(this).closest('tr').find('.done').val();
    if ( set ){
        $(this).closest('tr').find('.text').each(function(){
            $(this).val( $(this).val() + set );
        })
    }
});

Answer 2

这个 $(this).closest('tr').find(".text").val(..) 将使用“text”类中找到的“first”元素的值。 所以它总是使用“hi”值。

您需要做的是使用“文本”类迭代所有元素。 例如

//use $self as a reference to `$(this)`, since inside the function(currentInput)
//this will refer to the currently iterated "input"
var $self = $(this); 
$.each($(this).closest('tr').find(".text"), function(currentInput) {
    var valueToSet = $self.closest('tr').find(".done").val();
    currentInput.val(valueToSet);
});

希望我能帮上忙。

Answer 3

试试这个，这将允许您将输入字段中的值设置到每个 Textarea 中，它会记住每个 .text 的默认值

var obj = $('.text').map(function() {
  return $(this).val()
})
$(".ok").on('click', function() {
  var val = $(".done").val();
  $('.text').map(function(i,x) {
    $(this).val(obj[i] + val);
  })
});

<table>
  <tr>

    <td>
      <input type="button" value="ok" class="ok"></td>
    <td>done<input type="text" value="100" class="done" \> </td>
    <td>text1<textarea class="text">hi</textarea> </td>
    <td>text2<textarea class="text">hello</textarea> </td>
    <td>text3<textarea class="text">sup</textarea> </td>

  </tr>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

Answer 4

以下代码行会将set 的值设置为$('.text') 返回的第一个元素的值，在这种情况下为hi。

if (typeof set == "undefined") {
  var set = $(".text").val(); 
}

所以，请在您的 javascript 中使用以下代码：

1. 此代码使用函数作为.val() 的参数。

2. 它使用jQuery的.data()方法来存储.text元素的初始值。

3. 因此，当您单击'.ok' 按钮时，.val 方法的函数参数会检查初始值是否设置为.data 属性。如果不是，它将当前值作为初始值并将其附加到'.done' 输入框中的值。如果.data 属性已设置，则它使用.data 中存储的值而不是当前值。

$(".ok").on('click', function() {
  var doneValue = $(this).closest('tr').find('.done').val();
  
  $(this).closest('tr').find('.text').val(function(index, value){
     if($(this).data('value') === undefined){
        $(this).data('value', value);
     } else {
       value = $(this).data('value');
     }
     return value +  doneValue;
  });
});

<table>
  <tr>
 
    <td>
      <input type="button"  value="ok" class="ok"></td>
    <td>done<input type="text" value="100" class="done" \> </td>
    <td>text1<textarea class="text">hi</textarea> </td>
    <td>text2<textarea class="text">hello</textarea> </td>
    <td>text3<textarea class="text">sup</textarea> </td>

  </tr>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>