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

---

向所有元素添加一个公共类，然后处理该选择器的事件：

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

试试这个：

function updateSettings(e) {
    saveSettings(e["currentTarget"]["id"], e["currentTarget"]["checked"]);
    getSettings(e["currentTarget"]["id"]);
}

$('#OSPone, #OSPtwo, $OSPthree, #OSPfour').on('click', updateSettings);

或者，您可以向这些元素添加类或数据属性，并将其用作选择器。任何能让你的船漂浮的东西。

你也可以尝试以下方法：

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

storeVal('#OSPone, #OSPtwo, $OSPthree, #OSPfour');

---

有几种方法可以做到这一点。在我看来，我已经把它们按照最好的方式排列好了

1.班级 将类应用于所有当前元素OSPone-OSP4。例如，.settingsBtn

HTML

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

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

3. ^= 选择器 您可以选择ID以OSP开头的元素

4.单选择器 将所有选择器合并为一个选择器

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

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

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

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