javascript - 减少冗余的方式

我有这段代码将复选框的选中值存储在localStorage中。

我如何缩小？

$('#OSPone').click(function(e){
    saveSettings(e["currentTarget"]["id"], e["currentTarget"]["checked"]);
    getSettings(e["currentTarget"]["id"]);
});

$("#OSPtwo").click(function(e){
    saveSettings(e["currentTarget"]["id"], e["currentTarget"]["checked"]);
    getSettings(e["currentTarget"]["id"]);
});

$("#OSPthree").click(function(e){
    saveSettings(e["currentTarget"]["id"], e["currentTarget"]["checked"]);
    getSettings(e["currentTarget"]["id"]);
});

$("#OSPfour").click(function(e){
    saveSettings(e["currentTarget"]["id"], e["currentTarget"]["checked"]);
    getSettings(e["currentTarget"]["id"]);
});

设置功能：

function saveSettings(aVal, aKey){
    localStorage.setItem(aVal, JSON.stringify(aKey))
}

function getSettings(aKey){
    var str = localStorage.getItem(aKey);
    return JSON.parse(str);
}

最佳答案

有两种方法可以做到这一点。我认为，按照最佳方法来排列它们。

1.班级

将一个类应用于所有当前元素（#OSPone-#OSPfour）。例如，.settingsBtn。

的HTML

<input type="checkbox" id="#OSPone" class="settingsBtn" />
<input type="checkbox" id="#OSPtwo" class="settingsBtn" />
<input type="checkbox" id="#OSPthree" class="settingsBtn" />
<input type="checkbox" id="#OSPfour" class="settingsBtn" />

的JavaScript

$('.settingsBtn').click(function(e) {
    saveSettings(e.currentTarget.id, e.currentTarget.checked);
    getSettings(e.currentTarget.id);
});

2.选择复选框

假设您正在使用复选框，并且要在单击时更新每个设置，则可以相应地选择复选框。

$('input[type=checkbox]').click(function(e) {
    saveSettings(e.currentTarget.id, e.currentTarget.checked);
    getSettings(e.currentTarget.id);
});

3. ^=选择器

您可以选择ID以OSP开头的元素。

$('[id^=OSP]').click(function(e) {
    saveSettings(e.currentTarget.id, e.currentTarget.checked);
    getSettings(e.currentTarget.id);
});

4.单选器

将所有选择器组合为一个。

$('#OSPone, #OSPtwo, #OSPthree, #OSPfour').click(function(e) {
    saveSettings(e.currentTarget.id, e.currentTarget.checked);
    getSettings(e.currentTarget.id);
});

关于javascript - 减少冗余的方式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17779026/