[英]Trying to simplify this function so I don't have to run it 9 times
I am building a day scheduler.我正在构建一个日程安排程序。 I figured out how to save my local storage on a single hour field, but I need to simplify this function so I don't have to write it 8 times.我想出了如何将我的本地存储保存在一个小时字段上,但我需要简化这个函数,这样我就不必写 8 次了。 Can someone point me in the right direction so I can use this 1 function on each hour field.有人可以指出我正确的方向,以便我可以在每小时字段中使用这个 1 函数。
ie: 7am.即:早上 7 点。 8am.早上 8 点。 9am.早上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>
You could use some data-attribute so each button has a 'number' to reference the needed textarea.您可以使用一些数据属性,以便每个按钮都有一个“数字”来引用所需的文本区域。
You should change the buttons so each one has a different data-num
:您应该更改按钮,以便每个按钮都有不同的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>
and then update your save_data()
function to:然后将您的save_data()
函数更新为:
function save_data(e){
var number = $(e).data('num');
var input = document.getElementById('textArea' + number).value;
localStorage.setItem('text' + number, input);
}
And to initialize the values from the localStorage you could use a for
loop like this:并且要从 localStorage 初始化值,您可以使用这样的for
循环:
for(var i = 6; i <= 14; i++){
document.getElementById('textArea' + i).value = localStorage.getItem('text' + i);
}
NOTE: i used var
since you did.注意:自从您使用以来,我就使用了var
。 Please consider using a newer version of javascript ans use let
and const
instead.请考虑使用较新版本的 javascript 并使用let
和const
代替。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.