jquery .eq is not working for some nav items - php

Question

I am developing a page in WP where I have a set of posts on a page, these are added in a slideshow and under that there is a hidden div where the posts gallery images are hidden, these galleries are split into the posts and are generated just like the post slidshow except these containers are the actual posts content.
When you click on a slideshow item it toggles the visibility of that related project in the hidden container and shows it above the slider and you can then close it to clear the div. Currently I have this working on buttons as a test as you will see below.
The markup below generated via wordpress query posts:
Buttons that link to the posts create by a javascript loop counting the amount of posts:
<button class="toggles">work-1</button>
<button class="toggles">work-2</button>
<button class="toggles">work-3</button>
There is then a hidden container called .project under it that is made visible when you click on a project:
Here is the markup:
<article class="post royalSlider rsMinW"id="work-2 Exposure">
<img src="http://2mz:8888/wp-content/uploads/2013/02/interactive_table2.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">interactive_table</span>
<span class="rsABlock txtLeft col2" data-move-effect="none">
</span>
</div>
<img src="http://2mz:8888/wp-content/uploads/2013/02/table_build_03.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">table_build_03</span>
<span class="rsABlock txtLeft col2" data-move-effect="none">
</span>
</div>
<img src="http://2mz:8888/wp-content/uploads/2013/02/table_build01.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">table_build01</span>
<span class="rsABlock txtLeft col2" data-move-effect="none"></span>
</div>
<img src="http://2mz:8888/wp-content/uploads/2013/02/table_build02.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">table_build02</span>
<span class="rsABlock txtLeft col2" data-move-effect="none"></span>
</div>
<img src="http://2mz:8888/wp-content/uploads/2013/02/table_detail.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">table_detail</span>
<span class="rsABlock txtLeft col2" data-move-effect="none">
</span>
</div>
</article>
The problem I am having is that I have some javascript that basically links the top buttons with a prefix of #work- to the ids of the actual hidden projects with the same id="#work-1,2,3...etc" like so:
var projects = $('.project section article[id^="work-"]');
var num = projects.length;
//var nav = $('.projects section article')
console.log(num);
for (i=1; i<=num; i++) {
$('<button class="toggles" />').text('work-'+i).appendTo('#site-logo');
}
$('.toggles').live('click',
function(){
var thisIs = $(this).index();
$('.projects > .project section article[id^="work-"]').eq(thisIs).toggle();
$('.project').fadeIn(1000, 'easeInOutQuart');
});
It works but it always leaves out the last project so I can make 2 of them work but then one of the projects that is linked to the button will not work at all.
Has anyone got an idea as to why it will not work or a better way to do this?
Thanks,
Mark

Answer 1

Inside your live-click function, thisIs is zero indexed, so it doesn't actually match the name of what you're clicking. You don't have the whole markup for your project section, so I can't tell if that's the problem, but you say
links the top buttons with a prefix of #work- to the ids of the actual hidden projects with the same id="#work-1,2,3...etc"
Which implies that it should match up: the work-1 button should display the work-1 project, not work-0 as you're getting.
So you could add 1 to the index:
var thisIs = $(this).index() + 1;
Or, you could append the click handler as you're creating the elements.
for (i=1; i<=num; i++) {
$('<button class="toggles"/>')
.text('work-'+i)
.attr('button-index', i)
.appendTo('#site-logo')
.bind('click', function() {
var buttonIndex = $(this).attr('button-index');
// prove the index is correct
console.log(buttonIndex );
// rest of the click handler code=
$('.projects > .project section article[id^="work-"]').eq(buttonIndex ).toggle();
$('.project').fadeIn(1000, 'easeInOutQuart');
});
}
This renders your button markup as the following:
<button class="toggles" button-index="1">work-1</button>
<button class="toggles" button-index="2">work-2</button>
<button class="toggles" button-index="3">work-3</button>
I personally like setting data I need as attributes on the dom elements they relate to, it makes it much easier to see what's going on. And pulling data from the attributes is unlikely to change in jQuery, whereas you're likely to shoot yourself in the foot with the .index() function if you move where you're calling it from or tweak your query.
Finally, note that .live is deprecated in jQuery 1.7 and removed in 1.9, so you might want to upgrade and proactively change any other of your handlers using it to .on