javascript 本地存储数据在数组上复制

Question

我正在创建工作日任务计划程序。我能够从 localstoage 中提取我的数据。现在我正在尝试遍历对象数组，如果该 id 匹配，则检索该数据。每个对象都有 2 个属性，hour & description。我使用小时作为唯一标识符。当我从本地存储中检索数据时，它会在每个文本区域中复制目标对象数据。

如何让它只显示在文本区域中且只有匹配的 id？

这是我认为是问题所在的代码区域

for ( var i = 0; i < timeBlockArr.length; i++) {

  var timeBlockId = $(".time-block").attr("id");
  if(timeBlockArr[i].hour === timeBlockId) {    
    $(".time-block .description").val(timeBlockArr[i].description);
  }
}

和工作项目的js fiddle https://jsfiddle.net/j9hepL2b/

Answer 1

您正在遍历 localStorage 对象，因此 timeBlockId 的值不受您当前正在处理的 localStorage 元素的影响。

在这一行中，$(".time-block") 是一个包含 time-block class.

元素的数组

var timeBlockId = $(".time-block").attr("id");

但是 jQuery 的 .attr() 方法仅 returns 该数组中第一个元素的 ID。来自 the docs:

The .attr() method gets the attribute value for only the first element in the matched set.

因此：console.log(timeBlockId) 总是 "hour-9"。

如果我明白你想做什么，你根本不需要 if 语句。试试这个：

for ( var i = 0; i < timeBlockArr.length; i++) {

    const selector = '#' + timeBlockArr[i].hour + ' .description';

    $(selector).val(timeBlockArr[i].description);
  
}

即您 select 具有 class .description（文本区域）的元素是具有 ID #hour-9、#hour-10 等元素的后代，并修改它textarea 的值 .val().

javascript 本地存储数据在数组上复制

javascript localstorage data duplicating over array

javascript

arrays

object

local-storage