We Keep Coding

How can I keep class active after refreshing the page (using jQuery)

I have been searching for whole day and found several examples but none of them work correctly. I have a navigation bar and I want to keep class active after clicking on it and refreshing page but it gets lost.
This is my code:
HTML
<li class="sub-menu" style="border-bottom: 1px solid grey;">
<a class="menuItem active" href="#Url.Action("Index", "Administrator")">
<i class="fa fa-th"></i>
<span>Index</span>
</a>
</li>
<li class="sub-menu">
<a class="menuItem normal" href="#Url.Action("Products", "Administrator")">
<i class="fa fa-shopping-cart"></i>
<span>product</span>
</a>
</li>
Javascript
var retrievedObject = localStorage.getItem('classChange');
if (retrievedObject) {
$('.menuItem').addClass(retrievedObject)
}
$(".menuItem").click(function () {
if ($(this).hasClass("normal")) {
$(this).removeClass('normal').addClass('active');
localStorage.setItem('classChange', 'active');
} else {
$(this).removeClass('active').addClass('normal');
localStorage.setItem('classChange', 'normal');
}
});
I expected to change class on active after click but all classes change after click, I understand why it happens but don't know how to fix it.

Can you give each element an id value and, in the function, store in the local storage the id of the element and the class? Then, on reload check for the both id's?
And if you need for more elements you can save an array of the id's and then use it to loop between all id's if necessary.
So something like this:
var ids = ['id1','id2'];
for(i of ids) {
var retrievedObject = localStorage.getItem(i);
if (retrievedObject) {
var id = "#" + i;
$(id).addClass(retrievedObject);
}
}
$(".menuItem").click(function (event) {
if ($(this).hasClass("normal")) {
$(this).removeClass('normal').addClass('active');
localStorage.setItem('classChange', 'active');
} else {
$(this).removeClass('active').addClass('normal');
localStorage.setItem(event.target.id, 'normal');
}
});

The code
if (retrievedObject) {
$('.menuItem').addClass(retrievedObject)
}
should be wrapped on jQuery.ready().

Adding class to one element instead of all of them, example inside

So, I'm struggling here. I want to make an on click even that when I click on a navigation, it opens nested list and add class to parent list.
That part almost works, problem is that it adds that class to all elements from parent list.
<ul>
<li><div><p class="hidden">Test 1</p>
<ul class="shown">
<li>
<p>Inner 1</p>
</li>
</ul>
</div>
</li>
<li><div><p class="hidden">Test 2</p>
<ul class="shown">
<li>
<p>Inner 2</p>
</li>
</ul>
</div>
</li>
</ul>
<ul>
jque
$(document).ready(function () {
$('.shown').hide();
$('.hidden').click(function () {
var $answer = $(this).next('.shown');
if ($answer.is(':hidden')) {
$answer.show();
$('.hidden').addClass('color1');
} else {
$answer.hide();
$('.hidden').removeClass('color1');
}
});
});
css
.color1{
background:red;
}
jsfiddle
https://jsfiddle.net/Lc5n8k81/1/

here while adding and removing color1 class change $('.hidden') to $(this).. as $('.hidden') will add class to all element with .hidden class
Jsfiddle: https://jsfiddle.net/6moznpbr/
$(document).ready(function () {
$('.shown').hide();
$('.hidden').click(function () {
var $answer = $(this).next('.shown');
if ($answer.is(':hidden')) {
$answer.show();
$(this).addClass('color1');
} else {
$answer.hide();
$(this).removeClass('color1');
}
});
});

Inside your click handler, you want to refer to $(this) not $('.hidden') - the latter means all elements with class hidden:
$('.hidden').click(function () {
var $answer = $(this).next('.shown');
if ($answer.is(':hidden')) {
$answer.show();
$(this).addClass('color1');
} else {
$answer.hide();
$(this).removeClass('color1');
}
});
https://jsfiddle.net/Lc5n8k81/2/

jQuery display if statement

I'm trying to show/hide an element on mouse click but it has to be the element that is clicked not just the class because multiple classes will exist on the page.
Heres what I've got;
<i class="fa fa-bars dropMenu">here</i>
<nav class="drop-down">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
<li>Buy Now<span>5</span></li>
</ul>
</nav>
the javascript
$(".dropMenu").click(function(){
if ($(".drop-down",this).is(':visible')) {
$(".drop-down",this).hide();
} else if ($(".drop-down",this).is(':hidden')) {
$(".drop-down",this).show();
}
});
JSFiddle - http://jsfiddle.net/75yek8do/

You've not included jQuery and you're using <i> as a context but it is inline element and cannot have any elements inside it. So remove this, as the context.
$(".dropMenu").click(function() {
if ($(".drop-down").is(':visible')) {
$(".drop-down").hide();
} else if ($(".drop-down").is(':hidden')) {
$(".drop-down").show();
}
});
DEMO
But you can simply toggle it
$(".dropMenu").click(function(){
$('.drop-down').toggle();
});

If you must stick to your current markup and have many dropdowns :
$(".dropMenu").on('click', function(){
$(this).next('.drop-down').toggle();
});
Fiddle

Here you are http://jsfiddle.net/75yek8do/2/
You can have as many as you like items to click on (.dropMenu). It will search for the next occurrence of the .drop-down element and it will toggle its visibility.
$(".dropMenu").on('click', function () {
$(this).next(".drop-down").toggle();
});

Javascript event handler on list item li parent node

I'm new to javascript and I wanted to create an event onclick to list items. The problem is that I want to create an event to the li tag, but it keeps firing when I click the descendent ul's.
Here goes part of my code:
<li id="1660761" class="HTMLFirstLevel HTMLHorizontalArrowDown">
<ul id="ul1223945" class="HTMLItem">
<li id="1490659" class="HTMLRemainingLevels"></li>
<li id="483463" class="HTMLRemainingLevels"></li>
<li id="80919" class="HTMLRemainingLevels"></li>
<li id="1280053" class="HTMLRemainingLevels"></li>
<li id="1799353" class="HTMLRemainingLevels"></li>
<li id="1882209" class="HTMLRemainingLevels"></li>
<li id="462917" class="HTMLRemainingLevels"></li>
</ul>
</li>
<li id= ......>
<ul....>
<ul...>
</li>
and my javascript:
var parentNode = document.getElementById('1660761');
parentNode.addEventListener("click",function(e) {
alert('Hi There');
});
}
Now I only want it to fire on the item li with the id 1660761, and not the items inside the list.
The list is an imported component and I can't create events inside the html, that's why I'm accessing it outside with javascript.
Now here's how I've done it by scaning the div by tag name and then adding a "click" event listener if the content equals the tag inner html that I was searching for.
I leave the rest of the html that it's important to this aproach:
<div id="MainMenu" class="HTMLMenuContainer HTMLMenuHorizontal">
<ul id="ul1351387" class="HTMLMenu">
<li id="1660761" class="HTMLFirstLevel HTMLHorizontalArrowDown">
<a href="#">
<span>Back Office</span>
</a>
<ul id="ul1172716" class="HTMLItem">
<li id="1490659" class="HTMLRemainingLevels">
<a href="#">
<span>
Some submenu Here
</span>
</a>
</li>
.....
and the code:
var divs = document.getElementsByClassName('HTMLMenuHorizontal');
var span = divs[0].getElementsByTagName('span');
//I iterate till 19 cause its more than all the spans in the page.
for(var i=0; i<20; i++) {
var sp= span[i];
if(sp.innerHTML==('Back Office')){
sp.addEventListener("click",function back(){
//do something here like
alert('Back Office');
});
}
}
This works fine and it doesn't fire on the itens inside.
This works because in my case the itens doesn't change the content, only the visibility.
I do the same for all the other itens that have descendents.
Thank you all.

Below is my jQuery code for this problem:
$(function(){
$("li.1660761").live("click", onListItemLink);
}
function onListItemLink(){
alert('Hello World!');
}
This one is for JavaScript:
var parentNode = document.getElementById('1660761');
parentNode.onclick = onListItemLink;
function onListItemLink(){
alert('Hello World!');
}

take a look at this page to undersand correctly:
capture event
and what's function(e-->??)
I hope it helps.

$('#1660761').unbind('click').click(function(e) {
if (e.target !== this) return;
alert('Hey There!');
});
Try This code : http://jsfiddle.net/sd5LZ/

Target parent next div

I´m trying to target a <div> which is the next <li> of the parent <div> of the function show_projectinfo(). I've tried .next(), .closest(), etc... with no luck, any ideas?
The function is that if I click on a.more_info then the li.slider img is hidden... I don´t know if it is out of scope completely... This is a div that is repeated so I can´t just use the IDs.
markup:
<li class="info">
<a id="previous-slider"> < </a>
<span>01/15</span>
<a id="next-slider" href="javascript:void(0)"> > </a>
<a class="more_info" href="javascript:void(0)" onclick="show_projectinfo()">Info</a>
</li>
<li class="slider">
<img src="img/horizontal.jpg" alt="horizontal" width="624" height="429">
</li>
this is the script:
function show_projectinfo(){
$(this).closest('.slider img').hide();
$('.info_content').fadeIn();
}

The basic problem is that you are calling the method from onclick instead of binding it with jquery.
In the way you use it, the this refers to the window and not the element that was clicked.
function show_projectinfo(e){
e.preventDefault();
$(this).parent().next().find('img').hide();
$('.info_content').fadeIn();
}
$(function(){
$('.more_info').click(show_projectinfo);
});
and remove the onclick attribute from the html
If you have (although you shouldn't) to use the onclick attribute then pass it the this as an argument
function show_projectinfo(element){
$( element ).parent().next().find('img').hide();
$('.info_content').fadeIn();
}
and
<a class="more_info" href="javascript:void(0)" onclick="show_projectinfo(this)">Info</a>

Try:
$(this).parent().next() // parent() should be the <li> then next() will get your next <li>

$('.more_info').click(function(e){
e.preventDefault();
$(this).parent().next().find('img').hide();
$('.info_content').fadeIn();
});

Instead of .closest use .parent and .next, then select the img with .find.
Check out this jsFiddle:
$("a.more_info").bind("click", function(e){
e.preventDefault();
$(this).parent("li").next("li.slider").find("img").hide();
$('.info_content').fadeIn();
return false;
});

$('li').click( function (){
var nextLi = $(this).closest('div').next().children('li:first-child').attr('id');
console.log(nextLi);
});
Considering below markup:
<div id='div1'>
<li id='1'>1</li>
<li id='2'>2</li>
<li id='3'>3</li>
</div>
<div id='div2'>
<li id='4'>4</li>
<li id='5'>5</li>
<li id='6'>6</li>
</div>
You can see my live jsFiddle for more details.