减少冗余的方式

Question

我有这个代码，用于存储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);
}

Answer 1

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

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

Answer 2

试试这个：

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

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

或者您可以为这些元素添加类或数据属性，并将其用作选择器。无论你的船是什么漂浮。

Answer 3

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

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

Answer 4

你也可以试试这个：

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

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