Question

在下面的代码中，单击ok按钮时，它将获得done输入字段中的值，并显示在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

此 $（本）.closest（ 'TR'）。找到（ “文本”）。VAL（..）将使用“first”找到的元素的值与“text”类。所以它总是使用“hi”值。

您需要做的是使用“text”类迭代所有元素。 e.g。

//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 2

将您的脚本更改为 -

$(".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 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中使用以下代码：

此代码使用该函数作为.val()的参数。
它使用jQuery的.data()方法存储.text元素的初始值。
因此，当您单击'.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>

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

4 个答案: