1

次のコードを DRY アップする方法を考え出そうとしています。このコードは、特定のローカル ストレージ キーが存在するかどうかを確認し、存在する場合は何かを実行します。多くのキーを持つことができますが、それらはすべて、関連する要素 ID と結合するために番号が付けられます。つまり、キー: item1 > #item1 などです。

if (localStorage.getItem('item1')) {
  $('#item1').addClass('active');
}

if (localStorage.getItem('item2')) {
  $('#item2').addClass('active');
}

etc.

私は最近、要素IDで同様のことを行うことを学んだので、要素IDの代わりにローカルストレージキーを見つけるためにこのタイプのロジックを適用できるかどうか、またはどのように適用できるか疑問に思っていましたか?

$('*[id^=btn-item]').click(function () {
  var id = $(this).attr('id').slice(-1); 
  $('#item'+id).addClass('active');
}
4

2 に答える 2

1

localStorage可能な最大キー数を事前に知らなくても、可能なキーを (正しく) 反復処理するには:

var re = /^item\d+$/;
for (var i = 0, n = localStorage.length; i < n; ++i) {
    var key = localStorage.key(i);
    if (re.test(key)) {
       $('#' + key).addClass('active');
    }
}

または、ロジックを逆にして、最初に DOM を調べます。

$('[id^="item"]').addClass(function() {
    return localStorage.getItem(this.id) ? "active" : "";
});
于 2012-12-08T14:13:59.617 に答える
1

スライス コードは、ID が 10 より小さい場合にのみ機能することに注意してください。

より大きなIDについては、から$(this).attr('id').slice("btn-item".length);取得することをお勧めします。324"btm-item324"

そうは言っても、なぜこれをやらないのですか？

$('*[id^=btn-item]').click(function () {
  var id = $(this).attr('id').slice("btn-item".length); 
  if (localStorage.getItem('item'+id)) {
     $('#item'+id).addClass('active');
  }
}

ボタンアクションでこれを行いたくない場合は、次のように可能なキーを反復できます。

for (var i=0; i<100; i++) {
   if (localStorage['item'+i]) $('#item'+i).addClass('active');
}
于 2012-12-08T13:42:17.317 に答える