localstorageでアクティブクラスを追加

Question

'a'リンクをクリックすると、jqueryとlocalStorageを使って 'アクティブ'クラスを追加するのに苦労しています。

これは私が使用しているレイアウトです：

<div class="ordering-box" style="display: inline-block;"> 

     <?php $order_method = JRequest::getVar("orderto", ""); ?> 
      <?php $order_method = $moduleParams->ordering_default_method; ?> 

       <span class="ordering-box-text">chronologisch</span> 

       <a class="order-by" href="#" onclick="document.K2Filter<?php echo $moduleId; ?>.orderto.value='asc'; submit_form_<?php echo $moduleId; ?>(); return false;"> 
        <img class="ph" src="<?php echo JURI::base()."templates/template-src"?>/images/icons/chevron-down.png"> 
       </a> 

       <a class="order-by" href="#" onclick="document.K2Filter<?php echo $moduleId; ?>.orderto.value='desc'; submit_form_<?php echo $moduleId; ?>(); return false;"> 
        <img class="active-order" src="<?php echo JURI::base()."templates/template-src"?>/images/icons/chevron-up.png"> 
       </a> 

    </div> 

そして、これは、JSです：

jQuery(document).ready(function($) { 

$(function() { 
    $('.order-by').click(function() { 

     $('.order-by > img').siblings().removeClass('active-order'); 
     $('.order-by > img').addClass('active-order'); 

     var activeIndex = $(this).index(); 
     localStorage.setItem('mySelectValue', activeIndex); 
    }); 

}); 



jQuery(document).ready(function($) { 

    var activeIndex = localStorage.getItem('mySelectValue'); 

    if (isNan(activeIndex)) { 
     console.log('nothing stored'); 
    } else { 
     $('.order-by > img').addClass('active-order'); 

    } 
}); 

正しい「」リンクをクリックしたときに、この背後にある考え方があるが、基礎となるimgはアクティブなクラス（ちょうどbgカラー）を取得します。ブラウザがクリックで更新されるので、私はlocalStorageを使用して次回のロード時にそれを取得します...ここで何が間違っていますか？

Answer 1

@Andrew Dunai氏によると、ローカルストレージから読み取るときはnullを確認する必要があります。この行で

$('.order-by > img').siblings().removeClass('active-order');

、あなたは実際のイメージ画像の兄弟からクラスを削除したがされていないので、.siblings()を削除します。

ローカルストレージから読み取り中で、アクティブなオーダーにクラスを追加しようとすると、すべてのイメージが選択されます。ローカルストレージに格納されているインデックスに一致する特定のインデックスを指定する必要があります。私はここでeq()を使用しています。インデックスを格納するとき

if (activeIndex === null) { 
    console.log('nothing stored'); 
} else { 
    $('.order-by > img').removeClass('active-order'); // remove active class from all 
    $('.order-by').eq(activeIndex).find('img').addClass('active-order'); // add class to specified order 
} 

はまた、あなたはあなたが1

localStorage.setItem('mySelectValue', $(this).index() - 1); // -1 because there is a span at index 0

JSFiddle