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

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

更改脚本 -

$(".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

这 $（本）.closest（ 'TR'）。找到（ “文本”）。VAL（..） 将使用的 “第一” 发现价值元素与“文本”类。 所以它会一直使用“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>