0

我有这段代码将复选框的选中值存储在 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);
}
4

4 回答 4

4

There are a couple of ways to do it. I've put them in order of the best way of doing it in my opinion.

1. Classes

Apply a class to all the current elements (#OSPone - #OSPfour). For example, .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. Select Checkboxes

Assuming you are using checkboxes and on each one you want to update the settings on click, you can select checkboxes accordingly.

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

3. ^= Selector

You can select elements that have an ID that starts with OSP.

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

4. Single Selector

Combine all selectors into one.

$('#OSPone, #OSPtwo, #OSPthree, #OSPfour').click(function(e) {
    saveSettings(e.currentTarget.id, e.currentTarget.checked);
    getSettings(e.currentTarget.id);
});
于 2013-07-22T02:30:54.493 回答
2

尝试这个：

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

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

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

于 2013-07-22T02:22:12.903 回答
1

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

$(".settingCheck").click(function(e){
    saveSettings(e.currentTarget.id, e.currentTarget.checked);
    getSettings(e.currentTarget.id);
});
于 2013-07-22T02:22:01.557 回答
0

你也可以试试这个：

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

storeVal('#OSPone, #OSPtwo, $OSPthree, #OSPfour');
于 2013-07-22T02:26:45.657 回答