Я озадачен этим текущим проектом, который пытаюсь решить. Я могу распечатать точные результаты, которые мне нужны, в консоли, однако я не могу понять, как вставить их обратно в соответствующие 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, пока пользователь вводит данные во входные данные, чтобы они обновлялись в реальном времени.

Вы можете просмотреть его скрипку здесь с выводом результатов на консоль. Как сделать так, чтобы каждая ячейка в столбце веса обновлялась?

Заранее спасибо за помощь!

0
jayjo 15 Дек 2015 в 00:15

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);
    });
});

Скрипка

2
Rob Louie 14 Дек 2015 в 21:35

Вы должны удалить событие 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/

0
DinoMyte 14 Дек 2015 в 21:31

Чтобы решить эту проблему, вы должны отредактировать код HTML и JS. Вы должны сохранить исходное значение в атрибуте data, а затем распечатать его внутри цикла, используя параметр value в jquery каждой функции. Вот твоя скрипка отредактирована, надеюсь она поможет!

http://jsfiddle.net/ch1qui/LoLrotkn/3/

0
chq 14 Дек 2015 в 21:29