減少多餘的方式把這

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.選擇複選框

假設你正在使用複選框，並在每一個Y您想要點擊更新設置，您可以選擇相應的複選框。

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

3. ^=選擇

您可以選擇具有與OSP開頭的ID元素。

$('[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

添加一個公共類，所有的元素，然後處理其選擇的事件：

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

Answer 3

試試這個：

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

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

或者你可以添加一個類或數據attri插入這些元素並將其用作選擇器。無論漂浮你的船。

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