#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
.
Есть два способа исправить это
-
Укажите
td
идентификатор, на который вы можете ссылаться, например
и получить к нему доступ (внутри обработчика подтверждения нажатия)
var car_reg_1 = $("#car-1-reg-td").text();
обновлена скрипка с использованием этого подхода:https://jsfiddle.net/6oLvp7f5 /
или
- не удаляйте входные данные, а скрывайте их
<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. Спасибо! Я попытаюсь решить это сам, основываясь на том, что вы сказали, не хочу просто получать ответы все время. Но если я потерплю неудачу, я обязательно задам отдельный вопрос. Еще раз спасибо за ваш ответ и совет 🙂