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>