尝试简化此功能，这样我就不必运行 9 次

Question

我正在构建一个日间调度器。我想出了如何将我的本地存储保存在一个小时的字段中，但我需要简化这个函数，这样我就不必写 8 次了。有人可以指出我正确的方向，以便我可以在每个小时字段上使用这个 1 函数。

即： 早上7点。 上午8点。 上午9点。

function setColor(element, color) {
element.style.backgroundColor = color;
}
//6am
function save_data() {
var input = document.getElementById('textArea6').value;
localStorage.setItem('text6', input);
}
document.getElementById('textArea6').value = localStorage.getItem('text6');
//7am
function save_data() {
var input = document.getElementById('textArea7').value;
localStorage.setItem('text7', input);
}
document.getElementById('textArea7').value = localStorage.getItem('text7');
let textArea = ['textArea6', 'textArea7', 'textArea8', 'textArea9', 'textArea10', 'textArea11', 'textArea12', 'textArea12', 'textArea14']
let textContent = ['text6', 'text7', 'text8', 'text9', 'text10', 'text11', 'text12', 'text13', 'text14']
let textKet = [];
textArea({
id: 'textArea6',
value: 'text6'
})

<div class="row" id='6'>
<div class='col-2 hour'> 6am
</div>
<div class="col-8 form-group">
<textarea class="form-control bg-transparent" id="textArea6" name="text6" rows="1"></textarea>
</textarea>
</div>
<div class="col-2 saveBtn">
<button onclick='save_data()' type="submit" id="" class="btn btn-primary mb-2">Save</button>
</div>
</div>
<div class="row" id='7'>
<div class='col-2 hour'> 7am
</div>
<div class="col-8 form-group">
<textarea class="form-control bg-transparent" id="textArea7" name="text7" rows="1"></textarea>
</textarea>
</div>
<div class="col-2 saveBtn">
<button onclick='save_data()' type="submit" id="" class="btn btn-primary mb-2">Save</button>
</div>
</div>

Answer 1

您可以使用一些数据属性，以便每个按钮都有一个"数字"来引用所需的文本区域。

您应该更改按钮，以便每个按钮都有不同的data-num：

<div class="row" id='6'>
<div class='col-2 hour'> 6am
</div>
<div class="col-8 form-group">
<textarea class="form-control bg-transparent" id="textArea6" name="text6" rows="1"></textarea>
</textarea>
</div>
<div class="col-2 saveBtn">
<button onclick='save_data(this)' data-num="6" type="submit" id="" class="btn btn-primary mb-2">Save</button>
</div>
</div>
<div class="row" id='7'>
<div class='col-2 hour'> 7am
</div>
<div class="col-8 form-group">
<textarea class="form-control bg-transparent" id="textArea7" name="text7" rows="1"></textarea>
</textarea>
</div>
<div class="col-2 saveBtn">
<button onclick='save_data(this)' data-num="7" type="submit" id="" class="btn btn-primary mb-2">Save</button>
</div>
</div>

，然后将save_data()函数更新为：

function save_data(e){
var number = $(e).data('num');
var input = document.getElementById('textArea' + number).value;
localStorage.setItem('text' + number, input);
}

要初始化本地存储中的值，您可以使用如下所示的for循环：

for(var i = 6; i <= 14; i++){
document.getElementById('textArea' + i).value = localStorage.getItem('text' + i);
}

注意：自从你这样做以来，我用了var。请考虑使用较新版本的 javascript，改用let和const。