Question

我有很多选择，当他们更改值时，我将新值存储在Windows本地存储中。我的所有功能都重复相同的逻辑。有什么方法可以将这三者合二为一。请注意，Windows本地存储名称始终与选择的元素ID相同。

var store = window.localStorage;

$('#AccountID')
   .change(function () {
       store.setItem('AccountID', $(this).val());
    });

$('#ExamID')
   .change(function () {
       store.setItem('ExamID', $(this).val());
    });

$('#PageID')
   .change(function () {
       store.setItem('PageID', $(this).val());
    });

Answer 1

尝试

$('#AccountID, #ExamID,#PageID')
   .change(function () {store.setItem($(this).attr('id'), $(this).val());
    });

Answer 2

您可以使用元素的id作为本地存储的密钥来轻松缩短它，如下所示：

var store = window.localStorage;

$('#AccountID, #ExamID, #PageID').change(function() {
  store.setItem(this.id, $(this).val());
});

Answer 3

我认为最简单的方法是为要跟踪的每个元素分配一个CSS类，然后绑定单个事件处理程序。

var store = window.localStorage;

$('select.tracked').change(function(){
    store.setItem($(this).attr('id'), $(this).val());
});

根据需要调整选择器，以匹配您要跟踪的元素类型，例如:input

Answer 4

我可能过度简化了这一点（正如我通常所做的那样）。

但这可能会有所帮助 -

$('#AccountID')
   .change(function () {
       store.setItem($(this).attr('id'), $(this).val());
    });

与使用$(this).val()提取当前元素的值的方式相同，您可以使用$(this).attr('id')检索当前元素的id并将其用作关键字用于本地存储...

因此，为了使您的选择器更通用，您只需捕获所有选择元素的.change()事件 -

$('select')
   .change(function () {
       store.setItem($(this).attr('id'), $(this).val());
    });

如果这对您来说有点过于宽泛，您可以随时提供匹配类的相关选择元素，甚至可以在一个选择器中指定所有选择元素 -

$('#AccountID, #ExamID, #PageID, #anotherSelect, #...')

我可以使用jQuery重用该元素的.change函数中的select元素的id吗？

4 个答案: