时间戳

首页 > 解决方案 > 更新输入，更新变量，更新表

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

问题描述

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

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

我花了一天的大部分时间试图让第一部分工作，一旦我有这个权利，我可以将逻辑应用到其他部分（输入剩余里程并更新里程直到充电等。

任何指针将不胜感激。

标签： jqueryif-statementvariables

解决方案

首先，您在 期间读取动态输入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) {

next 是#car-1-reg一个输入，所以需要使用.val()

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

但是，inputfor car-1-reg 在输入更改事件中使用此行从 DOM 中删除

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

所以在检查时（在点击事件内）该元素不再存在$("#car-1-reg").length === 0)，其值现在存储在 parent 中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.

推荐阅读