Hi all,

 

I have a currency list on a store as follows:

<div id="top-left">
    <p class="nw-selector-indiv"><span class="USD">USD</span> <span class="GBP">GBP</span> <span class="EUR">EUR</span> <span class="AUD">AUD</span> <span class="CAD">CAD</span> <span class="JPY">JPY</span></p>
</div>

That is hardcoded in.

 

Here is some jQuery that changes classes when clicked.

<script>
        $('#top-left .nw-selector-indiv span').click(function(){
          $('select#currencies option').removeAttr('selected');
          $('#top-left .nw-selector-indiv span').removeClass('active');
          var theClass = $(this).attr("class");
          $(this).addClass('active');

    //    var realz = $('select#currencies option').filter(function() {
    //      return this.value.toLowerCase() == theClass;
    //    });
          
        $('select#currencies > option[value="'+ theClass +'"]').prop('selected',true).trigger('change');
          
        });

</script>

My problem is that I want the currency that is selected to have the .active class when the age loads, so let's say I'm on page#1 and select JPY, I want JPY to be highlighted (.active class added) when I go to page#2. Currently it is only added on a click event.

 

Any ideas on how that can be done.

 

*I did not add the code above, just trying to edit it.

 

Also let me know if anyone needs to see more code, might be missing something.

Edited November 8, 20169 yr by mrludable

A very quick fix would be to store it in localStorage and look for it there when the page loads. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage or perhaps session storage if you don't want it to persist after the user leaves.

 

In an ideal world though this kind of thing is best suited to a SPA application where you employ some routing See React & React Router, but this will be a struggle if you don't already have strong JavaScript knowledge.

I agree with Robert's use of LocalStorage, just make sure the user has a way of invalidating it, either by changing currency or clicking on the existing active item.

 

I'd highly recommend binding your JS using data attributes or ID's instead. Chaining selectors is not only expensive to look up in the DOM, but you also run the risk of your JS breaking from the slightest change in structure.

Yeah, I also wouldn't bind click handlers onto elements like spans. Bind them to buttons or anchors - things that people can tab to otherwise you render your website inaccessible to a proportion of your audience.

Hi guys,

 

Thanks for the replies. I had actually wanted the currencies to be in an unordered list. The guy that had coded it came back to me today and has added code that will allow the selected currency to have the class .active when navigating to a new page.

 

I haven't yet looked at the code, but will be working on it again late so can have a look and maybe post the extra code here.