HTML input type="date" 保持缓存/传播值答案

【问题标题】：HTML input type="date" keeps caching/propogating valuesHTML input type="date" 保持缓存/传播值
【发布时间】：2020-11-27 21:42:04
【问题描述】：

问题

基本上，如果我将项目添加到列表中，我会执行 ajax 请求以将它们添加到后端的数组中并刷新页面。

每个项目都有两个日期条目，一个用于接收，一个用于发送。如果我填充其中一个日期，它将通过另一个 ajax 请求在后端更改它，然后填写该项目的值。

问题是由于缓存或其他原因，经常发生当一个输入日期值更改时，它会“复制”到另一个。我认为这是一个缓存问题，就像我检查元素一样，实际更改的元素具有 value="xxxx-xx-xx" 而缓存损坏的元素具有 value=""。

尝试解决问题

我已经尝试过$("input").attr("autocomplete", "off"); // Disable input caching

代码/图像

这是当前问题的图片https://imgur.com/PNNlRCK

当我检查我想要更改的元素时，

<input type="date" name="2020-08-12" id="sent" class="inp bg-dark border-0 text-center text-white" value="2020-08-12" autocomplete="off">

当我检查缓存正在破坏的元素时，

<input type="date" name="" id="rcvd" class="inp bg-dark border-0 text-center text-white" value="" autocomplete="off">

然而，两者在视觉上都显示相同的日期。正如您可以想象的那样，这确实会使用户感到困惑并导致他们尝试自己解决问题，可能会造成更多问题。

【问题讨论】：

【解决方案1】：

您可能在选择输入以更改值时使用了重复选择器。我建议每个条目都应该由一个 id 唯一标识（例如：UUID），并且每个条目中的每个输入都应该有一个名称。

然后在 HTML 中，您使用 data-id 属性来选择条目，并使用 name 属性来选择所需的输入。最后，您可以执行更改输入值。

$('.entry[data-id="7558c4eb-8c2c-499b-b5cc-ea4ca475b399"] input[name=sentDate]').val("2020-08-08");

旁注：对每个条目中的 2 个输入使用 sent 和 rcvd id 不好。 id 属性是整个 html 页面唯一的。

【讨论】：