Question

这是一些有效的新手代码，但随着列表的增长会膨胀。我正在寻找一种方法，可以在每次创建新输入时消除重复点击功能位。

我正在创建一个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值并执行其他操作。

提前感谢您的建议！

Answer 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();
});

Answer 2

试试这个：

$('div[id^="webImport"]').click(function() {
   var n = this.id.match(/\d+/g);
   localStorage.setItem("picked", $("#webImportInput"+n).val());
   getList();
})

Answer 3

如果功能完全相同，您可以使用类而不是id来绑定事件。

像

$('.hiddenWebInput').click(function(){
    localStorage.setItem("picked", $(this).val());
});

当这个可点击按钮列表增长时，如何消除重复此功能？

3 个答案: