запись val() в input [Архив форума]

lok105

20.01.2015, 13:10

Чет с огромным скрипом поддается мне jquery )))
Есть таблица

<table id="table">
<tr class = 'table_body'>
<td><input class='pole' type='text'/></td>
<td><input class='num1' type='text'/></td>
</tr>
<tr class = 'table_body'>
<td><input class='pole' type='text'/></td>
<td><input class='num1' type='text'/></td>
</tr>
<tr class = 'table_body'>
<td><input class='pole' type='text'/></td>
<td><input class='num1' type='text'/></td>
</tr>
</table>

и есть скрипт

$(function(){
$("#table").on("change", ".table_body", function(){
$(this).find(".pole").each(function(){
var res = $(".pole").val();
$('.num1').val(res);
});
});
});

Смысл, что бы что пишешь в input pole отображалось в input num1.
Сейчас срабатывает только изменение в первом <tr> и меняет все input num1

Что я тут ни как понять не могу?
Спасибо!

danik.js

20.01.2015, 13:17

Зачем each? Там одно pole всего.$(".pole").val()
Это аналог document.querySelector('.pole').value - при этом querySelector вернет первое найденное .pole. То есть нет никакой привязки к конкретной "активной" строке таблицы. Подсказка:

$(this).find(".pole").val()
// или лучше переписать как
$('.pole', this).val()

рони

20.01.2015, 13:19

lok105,
:-?
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var pole = $(".pole"),
num = $(".num1");
pole.each(function(indx, el) {
$(el).on("input", function() {
num[indx].value = el.value
})
})
});
</script>
</head>

<body>
<table id="table">
<tr class = 'table_body'>
<td><input class='pole' type='text'/></td>
<td><input class='num1' type='text'/></td>
</tr>
<tr class = 'table_body'>
<td><input class='pole' type='text'/></td>
<td><input class='num1' type='text'/></td>
</tr>
<tr class = 'table_body'>
<td><input class='pole' type='text'/></td>
<td><input class='num1' type='text'/></td>
</tr>
</table>

</body>

</html>

lok105

20.01.2015, 14:33

Danik, в этом случае свою ошибку понял.
Но при этом раскладе так же при заполнении pole переписываются все input num1, а не только тот который напротив изменяемого pole. Я это и пытаюсь понять.

$(function(){
$("#table").on("change", ".table_body", function(){
var cost = $(this).find(".pole").val();
$('.num1').val(cost);
})
})

Рони, я наверное зря упростил скрипт для примера(не специально, просто что бы для себя раз и навсегда объяснить эту систему было понятнее)))).
1.pole заполняется автозаполнением, и первые буквы переносятся, а выбранное слово нет.
2.Скрипт не работает с подгружаемыми динамически.
<tr class = 'table_body'>
<td><input class='pole' type='text'/></td>
<td><input class='num1' type='text'/></td>
</tr>

В основном я себе голову сломал, что если через this обращаться к pole, num1 не является потомком pole, это потомок table_body. и как сделать, что бы изменения касались именно выбранных pole и num1 как их связать?

danik.js

20.01.2015, 15:19

не только тот который напротив изменяемого pole
Я кажется объяснил причину этого, на примере pole. Неужели это так сложно для понимания?

рони

20.01.2015, 15:36

1.pole заполняется автозаполнением, и первые буквы переносятся, а выбранное слово нет.
ничего непонял var cost = $(this).find(".pole").val(); тут нашёл
$('.num1').val(cost);
а тут почему не ищём?

рони

20.01.2015, 15:38

// или лучше переписать как$('.pole', this).val()
сам так пишу, а шепчут find в этом случае быстрее - скажи что-нибудь?

lok105

20.01.2015, 17:24

$(function(){
$("#table").on("change", ".table_body", function(){
var cost = $(this).find(".pole").val();
$(this).find('.num1').val(cost);
})
});

да, так все работает. Просмотрел просто после того как убрал each this num1 находится в поле видимости .table_body
поэтому this и заработал

У меня вопрос был как быть если получение переменной pole происходит внутри функции.

т.е.

$(function(){
$("#table").on("change", ".table_body", function(){
$(this).find(".pole").autocomplete({
change: function(event, ui) {
var ID = ui.item.id; // Достаем значение
// ключа после автозаполнения
// Далее json запрос по ключу
$.ajax({
url: "js/data.php",
dataType: "json",
type: "GET",
data: {
id: ID

},
success: function(data){
res = data; // Получаем вернувшуюся переменную со
// значением, которое надо записать в num1
// И вот дальше засада...
//Значение переменной res за пределы функции не
//выходит, а обратится к данному полю num1 внутри функции не получается,
//распространяется на все num1
//В этом и был вопрос как эту переменную передать правильно в свой num1

$(".table_body").find(".num1").val(res); // Вот тут засада
}

})

});

})
});

Еще раз прошу прощения, что упростил пример, видимо не правильно его упростил, впредь не буду ))

рони

20.01.2015, 17:30

lok105,
сохранить this в строке 2
потом использовать в строке 25

lok105

20.01.2015, 17:51

Сорри, не понял про сохранить this в строке 2... куда там эту самую this впихнуть?

рони

20.01.2015, 18:02

lok105,
в любую переменную - обычно var self = this;
....
$(self).find(".num1").val(res);

danik.js

20.01.2015, 18:03

шепчут find в этом случае быстрее
Бред. https://github.com/jquery/jquery/blob/master/src/core/init.js#L89

Вызов $(selector, context) тупо резолвится как $(context).find(selector), так что разницы никакой.

lok105

20.01.2015, 18:07

АААА РОНИ!!!!! Спасибище! все работает до следующего затыка ))

рони

20.01.2015, 18:16

danik.js,
большое спасибо за аргументированный ответ.