更新输入，更新变量，更新表

Question

我正在尝试创建一个简单的表，您可以在其中输入一个注册号，然后将汽车名称插入到与其相邻的单元格中。

我正在使用变量，在编写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;
}});

我已经把完整的项目上传到这里：https://jsfiddle.net/Coxy/pyho3as2/1/

我花了一天的大部分时间试图让第一部分开始工作，一旦我有了这个权利，我就可以将逻辑应用到其他部分(输入左边的里程，并在充电前更新里程等)。

任何指点都会很感激。

Answer 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();

但是，用于car-1-reg的input将从DOM中删除，并在输入更改事件中使用这一行。

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

因此，在检查时(在单击事件中)，该元素不再存在$("#car-1-reg").length === 0)，其值现在存储在父td中。

有两种方法可以解决这个问题

1. 给td一个您可以引用的id (如

)

并访问它(在确认单击处理程序中)

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。