Я озадачен этим текущим проектом, который пытаюсь решить. Я могу распечатать точные результаты, которые мне нужны, в консоли, однако я не могу понять, как вставить их обратно в соответствующие tds
таблицы.
var calc = $('.calc'),
odds = $('.weight');
$(document).on('keyup keydown', '.calc', function(e){
var curVal = calc.val();
$(document).find('.weight').each(function(){
var oddsVal = ($(this).text() / curVal);
console.log(oddsVal);
});
});
Я пытаюсь разделить текст в каждой ячейке столбца веса на input.calc
, пока пользователь вводит данные во входные данные, чтобы они обновлялись в реальном времени.
Вы можете просмотреть его скрипку здесь с выводом результатов на консоль. Как сделать так, чтобы каждая ячейка в столбце веса обновлялась?
Заранее спасибо за помощь!
3 ответа
Проблема в том, что ячейки обновляются до того, как значение вводится, что приводит к тому, что «Бесконечность» создается 4 раза. Вы даже можете увидеть это в журнале консоли.
Вместо этого убедитесь, что в calc есть значение перед выполнением функции.
Кроме того, если вы неоднократно меняете поле calc, оно выполнит новый расчет на основе недавно замененных значений, что не похоже на правильное поведение. Поэтому вместо этого захватите исходные значения при загрузке страницы и используйте их при расчете:
var originalWeights = getOriginalWeights();
function getOriginalWeights() {
var weights = [];
$('.weight').each(function(index) {
weights[index] = $(this).text();
});
return weights;
}
$(document).on('keyup keydown', '.calc', function(e){
if (!calc.val()) return;
var curVal = calc.val();
$(document).find('.weight').each(function(index){
var oddsVal = (originalWeights[index] / curVal);
$(this).text(oddsVal);
});
});
Вы должны удалить событие keydown
из делегирования события, так как значение в поле ввода будет недоступно во время keydown
. Также наличие keyup
и keydown
будет запускать события одновременно, вызывая каждый блок дважды. Также вам не нужно объявлять var calc = $('.calc'),
глобально, так как элемент будет доступен во время цели события в документе.
$(document).on('keyup', '.calc', function(e){
var curVal = $(this).val();
$('table td.weight').each(function(){
var oddsVal = $(this).text() / curVal;
alert(oddsVal);
});
});
Пример: http://jsfiddle.net/LoLrotkn/4/
Чтобы решить эту проблему, вы должны отредактировать код HTML и JS. Вы должны сохранить исходное значение в атрибуте data
, а затем распечатать его внутри цикла, используя параметр value
в jquery каждой функции. Вот твоя скрипка отредактирована, надеюсь она поможет!
http://jsfiddle.net/ch1qui/LoLrotkn/3/
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.