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

如何解决更新输入，更新变量，更新表

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

我正在使用变量，并且在编写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/

我一天中的大部分时间都在努力使第一部分开始工作，一旦我拥有了正确的权限，就可以将逻辑应用于其他部分（输入剩余英里数并更新英里数直到充电等）。

任何指针将不胜感激。

解决方法

首先，您在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 {reg的input已从DOM中删除

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

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

有两种方法可以解决此问题

给td一个您可以引用的ID，例如

并访问该文件（在确认点击处理程序内部）

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。