2

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

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

提前感谢您的建议！

4

3 回答 3

1

我的第一个想法是：

$("input[id^=webImport]").click(function() {
    var num = this.id.match(/d+/);
    localStorage.setItem("picked", document.getElementById("webImportInput" + num).value);
    getList();
});

class但是，老实说，这已被您在input元素上有 a 的事实所取代，所以：

$("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();
});
于 2012-08-06T00:02:15.540 回答
1

试试这个：

$('div[id^="webImport"]').click(function() {
   var n = this.id.match(/\d+/g);
   localStorage.setItem("picked", $("#webImportInput"+n).val());
   getList();
})
于 2012-08-06T00:03:40.287 回答
0

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

像

$('.hiddenWebInput').click(function(){
    localStorage.setItem("picked", $(this).val());
});
于 2012-08-06T00:01:58.427 回答