Aktive Klasse mit localStorage hinzufügen

Question

Ich habe Probleme mit dem Hinzufügen einer 'aktiven' Klasse mit jquery und localStorage, wenn Sie auf einen 'a' Link klicken.

Dies ist das Layout Ich verwende:

<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> 

Und das ist die 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'); 

    } 
}); 

Die Idee dahinter ist, wenn sie auf den den richtigen 'a' Link klicken, die Underly img erhält eine aktive Klasse (nur eine BG-Farbe). Da der Browser bei Klick aktualisiert wird, benutze ich localStorage, um ihn beim nächsten Laden zu laden ... was mache ich hier falsch?

Answer 1

Wie @Andrew Dunai sagte, sollten Sie beim Lesen aus dem lokalen Speicher auf Null überprüfen.

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

In dieser Zeile werden Entfernen Sie die Klasse von den Geschwistern des Bildes aber nicht das eigentliche Bild so .siblings() entfernen.

Wenn Sie vom lokalen Speicher lesen und versuchen, die Klasse zur aktiven Bestellung hinzuzufügen, wählen Sie jedes Bild aus. Sie müssen einen bestimmten Wert angeben, der mit dem im lokalen Speicher gespeicherten Index übereinstimmt. Ich benutze eq() hier.

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 
} 

Auch wenn der Index zu speichern, müssen Sie sich bewusst sein, dass der span.ordering-box-text am Index wird 0, so sollten Sie den Index von 1.

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

JSFiddle