Обновление входных данных, для обновления переменной, для обновления таблицы

#jquery #if-statement #variables

#jquery #if-оператор #переменные

Вопрос:

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

Я использую переменные, и при написании инструкции if это происходит одним из двух способов, несмотря на условия.

Ниже приведен код для инструкции if:

 $("input[type='text']").change(function(){
$(this).closest('td').text($(this).val())});

var car1 = "Little White";
var car_1_reg = "NP60UQQ";

var car_reg_1 = $("#car-1-reg").html();
var car_name_1 = $("#car-1-name").html();
$(".confirm").click(function() {
if (car_reg_1 != car_1_reg) {
    car_name_1.innerText = 'Not a valid Registration';
}   else {
    car_name_1.textContent = car1;
}});
  

и я загрузил полный проект в jsfiddle здесь:https://jsfiddle.net/Coxy/pyho3as2/1 /

Я потратил большую часть дня, пытаясь заставить первую часть работать, и как только у меня будет это право, я смогу применить логику к другим частям (введите оставшиеся мили и обновите мили до начисления и т.д.

Любые указания были бы действительно оценены.

Ответ №1:

Во-первых, вы читаете динамический ввод во время doc.ready , поэтому он никогда не будет иметь обновленного значения. Это необходимо перенести в click обработчик:

 var car_reg_1 = $("#car-1-reg").html();
$(".confirm").click(function() {
    if (car_reg_1 != car_1_reg) {
  

становится

 $(".confirm").click(function() {
    var car_reg_1 = $("#car-1-reg").html();
    if (car_reg_1 != car_1_reg) {
  

далее, #car-1-reg это входные данные, поэтому необходимо использовать .val()

 var car_reg_1 = $("#car-1-reg").val();
  

однако input для car-1-reg удаляется из DOM с помощью этой строки в событии изменения входных данных

 $(this).closest('td').text($(this).val());
  

итак, во время проверки (внутри события click) этот элемент больше не существует $("#car-1-reg").length === 0) со значением, которое теперь хранится в родительском элементе td .

Есть два способа исправить это

  1. Укажите td идентификатор, на который вы можете ссылаться, например

и получить к нему доступ (внутри обработчика подтверждения нажатия)

 var car_reg_1 = $("#car-1-reg-td").text();
  

обновлена скрипка с использованием этого подхода:https://jsfiddle.net/6oLvp7f5 /

или

  1. не удаляйте входные данные, а скрывайте их
 <td><span></span><input id="car-1-reg"...
  

и

 $("input[type='text']").change(function() {
    $(this).closest('td').find("span").show().text($(this).val());
    $(this).hide();
});
  

затем вы можете ссылаться на входные данные непосредственно в обработчике подтверждения нажатия кнопки мыши (с помощью .val() ).

Это также имеет то преимущество, что если вы когда-нибудь захотите «сбросить», вы можете скрыть span и показать input .

Комментарии:

1. Это потрясающе, большое вам спасибо, что нашли время все это записать и объяснить мне. Я попытаюсь исправить это первым делом завтра. Теперь я наблюдаю за своим сыном, пока мой партнер идет на работу. Еще раз спасибо 🙂

2. Привет, большое вам спасибо, я только что попробовал ваше предложение (пошел на скрытие диапазона), и оно отлично работает, спасибо! Я проголосовал (несколько раз), но поскольку моя репутация ниже 15, это говорит о том, что голосование m не является публичным, но все равно имеет значение. Еще раз спасибо! С вашей помощью я надеюсь завершить оставшуюся часть размышлений и отправить проект к концу дня! Хорошего дня и еще раз спасибо! 🙂

3. Извините за беспокойство, но я попробовал это, чтобы добавить остальное: $(«.reset»).click(function() { $(«span[type=’text’]»).change(function(){ $(this).closest(‘td’).find(«span»).hide().text($(this).val()); $(«input»).show(); }); }); И это, очевидно, не работает, неужели я веду себя глупо, просто меняя входные данные на span и наоборот?

4. $("span[type='text']") не будет работать, поскольку это не type =text — вам нужно будет ссылаться на них каким-либо другим способом, например, добавив класс в span или tds или сославшись на них каким-либо другим способом, таким как $("input[text=text]").closest("td").find("span") — обратите внимание, что у span не будет change события. Вероятно, лучше задать новый вопрос, поскольку этот ответ относится к вашему первоначальному вопросу.

5. Спасибо! Я попытаюсь решить это сам, основываясь на том, что вы сказали, не хочу просто получать ответы все время. Но если я потерплю неудачу, я обязательно задам отдельный вопрос. Еще раз спасибо за ваш ответ и совет 🙂