这是一些有效的新手代码,但随着列表的增长会膨胀。我正在寻找一种方法,可以在每次创建新输入时消除重复点击功能位。
我正在创建一个div作为具有唯一名称的按钮,在与该按钮绑定的唯一JSON文件中调用一些值,然后将值存储在localStorage中(单击将始终调用相同的函数)。
这个例子只涉及三个,但列表可能会增加到几十个。
<div style="display:none;">
<input class="hiddenWebInput" id="webImportInput1" type="text" value="fooList1.txt" />
<input class="hiddenWebInput" id="webImportInput2" type="text" value="bar.txt" />
<input class="hiddenWebInput" id="webImportInput3" type="text" value="foo.txt" />
</div>
<script>
$("#webImport1").click(function() {
localStorage.setItem("picked", document.getElementById("webImportInput1").value);
getList();
});
$("#webImport2").click(function() {
localStorage.setItem("picked", document.getElementById("webImportInput2").value);
getList();
});
$("#webImport3").click(function() {
localStorage.setItem("picked", document.getElementById("webImportInput3").value);
getList();
});
我使用getList()
来设置其他localStorage值并执行其他操作。
提前感谢您的建议!
答案 0 :(得分:1)
我的第一个想法是:
$("input[id^=webImport]").click(function() {
var num = this.id.match(/d+/);
localStorage.setItem("picked", document.getElementById("webImportInput" + num).value);
getList();
});
但是,老实说,这已被class
元素input
所取代,因此:
$("input.hiddenWebInput").click(function() {
var num = this.id.match(/d+/);
localStorage.setItem("picked", document.getElementById("webImportInput" + num).value);
getList();
});
然后稍微改进一下,使用jQuery,而不是jQuery和DOM之间的混合和匹配,选择方法:
$("input.hiddenWebInput").click(function() {
var num = this.id.match(/d+/);
localStorage.setItem("picked", $("#webImportInput" + num).val());
getList();
});
答案 1 :(得分:1)
试试这个:
$('div[id^="webImport"]').click(function() {
var n = this.id.match(/\d+/g);
localStorage.setItem("picked", $("#webImportInput"+n).val());
getList();
})
答案 2 :(得分:0)
如果功能完全相同,您可以使用类而不是id来绑定事件。
像
$('.hiddenWebInput').click(function(){
localStorage.setItem("picked", $(this).val());
});