jQuery Show/Hide and looping trouble

[Thadley]

What’s up people!

Alright so, I really suck at jQuery/javascript and I can never seem to understand it at all, nor get it to work like I want too!

In my html I have an unordered list like this:

Phase 1: Information


Phase 2: Planning


Phase 3: Design


Phase 4: Development


Phase 5: Finalizing


Phase 6: Maintenance

and then 6 divs with each of the information for each section inside of them. When I click Phase 1: Information, I want to be able to show the div with the information about phase 1, and so on with the rest of the other phases. I can’t seem to even understand something that is as simple as this :S

In my javascript, I have,

function designProcess(){



//targets all the phases and the phase content

phaseInfo = $('.phase-info');

phases = $('#phases');



//hides all the phases

phaseInfo.hide();





for( var i = 0; i <= 5; i++ ){



var phaseNum = $('#phases').find('li');



phases.click(function(){



alert(phaseNum);



});



}



};

It will give me an alert 6 times, which is good because that’s how many phases there is. But how do i keep track of which li I click and then to show the appropriate div?

I really really hate jQuery and javascript because i don’t understand it at all.

Guidance would be awesome! Thanks! :(

[Thadley]

Javascript Updated:

for( var i = 0; i < 1; i++ ){



phaseItem = $('#phases').find('li');



phaseItem.click(function(){



phaseCount =  i++;



if( phaseCount == 1){

$('#1').show();

}else{

$('#1').hide();

}



if( phaseCount == 2){

$('#2').show();

}else{

$('#2').hide();

}



if( phaseCount == 3){

$('#3').show();

}else{

$('#3').hide();

}



if( phaseCount == 4){

$('#4').show();

}else{

$('#4').hide();

}



if( phaseCount == 5){

$('#5').show();

}else{

$('#5').hide();

}



if( phaseCount == 6){

$('#6').show();

}else{

$('#6').hide();

}



});



}

This isn’t helping because it obviously works correctly the first time through, but then after it doesn’t work because phaseCount becomes greater than 6.

How can I limit the range between 1-6 and have it work both forward and backwards by keeping track of which list item I press :S

[SgtLegend]

See how the following code goes for you, it should do pretty much the exact same thing your current code does as far as the click event and toggling but it will only loop through the 6 list items you have set.

var phaseCount = 0;



$('li', '#phases').each(function(i) {

phaseCount++;



$(this).click(function() {

if (i === phaseCount) {

$('.phase-info, #' + i).toggle();

}

});

});

[Thadley]

When i copy and paste that code in it doesn’t do anything. I wrote an alert inside the click function to alert the phaseCount and it says 6.

Now for the

$('.phase-info, #' + i).toggle();

I think I can remove the .phase-info because each of the divs that has the information in, I assigned a number 1 through 6 so I could probably target easier.

Any thoughts on whats not working?

[Thadley]

Function as it stands:

function designProcess(){



//targets all the phases and the phase content

phaseInfo = $('.phase-info');



//hides all the phases

phaseInfo.hide();





for( var i = 0; i < 5; i++ ){



phaseCount++;



$('#phases li').each(function() {



$(this).click(function() {



alert(phaseCount)



if (i == phaseCount) {

$('#' + i).show();

}



});//ends click function



});//ends each function



};//ends for loop



};

Currently it alerts 5, 5 times and then shows the 5th div regardless which list item I actually click on.

Still really lost :S fml this stuff isn’t easy.

[jamygolden]

@Thadley remember: An ID or class can’t start with a number.

[Thadley]

It can’t?

[jamygolden]

My mistake, just IDs.
https://css-tricks.com/28-ids-cannot-start-with-a-number/

[Thadley]

@jamy_za Thanks a lot for your help. I did some changes in my css, html and 2-3 lines of script you post and it worked. I was trying this huge ass complicated thing and all it took was 2 lines.

I always over over complicate things for myself lol

[Thadley]

@jamy_za Now if I wanted to have an active class on the current showing phase how would I do that?

Im trying an if statement to saying the following which is inside the click function,

If(index.index(this)){

$(‘#phaseNav li’).eq($(this).index()).css({ backgroundColor: ‘blue’ })

}else{

$(‘#phaseNav li’).eq($(this).index()).css({ backgroundColor: ‘#eee’ })

}

But it doesn’t work properly. I’m on my iPhone so that may not be 100% correct of what I have but it is close. I was just curious. Also, when I tried having a CSS class and then apply it using addClass() it always added it to the last list item but the style wouldn’t actually apply. Hmm?

I’ll check back soon!

[jamygolden]

It’s a bit easier than that :P
http://jsfiddle.net/jamygolden/nGwPv/1/
You can style .current accordingly.

Note: The only difference from before is I’ve added .addClass(‘current’) and removeClass(‘current’).

[Thadley]

I’ll test it out when I’m home in about an hour an I’ll let you know how it goes! If it works your epic! Lol

[Thadley]

@jamy_za from your link I added the below code in the css section.

.current{ color: blue; }

and what it does is it changes the text color of the ‘hidden’ div. How can I make that change css properties of the nav list items? I believe I tried this code before also but it didn’t work :S

[jamygolden]

I’m very sure jsfiddle isn’t working correctly for me lol. Anyway, this will add ‘current’ to the #nav li’s

$(document).ready(function(){

$('#nav').children().click(function(){

$(this).addClass('current').siblings().removeClass('current');

$('#list').children().eq($(this).index()).show().siblings().hide();

});

});

[Thadley]

@jamy_za thanks a lot for our help dude

[Author]

Posts