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

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

i developing page in wp have set of posts on page, these added in slideshow , under there hidden div posts gallery images hidden, these galleries split posts , generated post slidshow except these containers actual posts content.

when click on slideshow item toggles visibility of related project in hidden container , shows above slider , can close clear div. have working on buttons test see below.

the markup below generated via wordpress query posts:

buttons link posts create javascript loop counting amount of posts:

<button class="toggles">work-1</button> <button class="toggles">work-2</button> <button class="toggles">work-3</button>

there hidden container called .project under made visible when click on project:

here 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 having have javascript links top buttons prefix of #work- ids of actual hidden projects same id="#work-1,2,3...etc" so:

var projects = $('.project section article[id^="work-"]'); var num = projects.length; //var nav = $('.projects section article') console.log(num); (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 leaves out lastly project can create 2 of them work 1 of projects linked button not work @ all.

has got thought why not work or improve way this?

thanks, mark

inside live-click function, thisis 0 indexed, doesn't match name of you're clicking. don't have whole markup project section, can't tell if that's problem, say

links top buttons prefix of #work- ids of actual hidden projects same id="#work-1,2,3...etc"

which implies should match up: work-1 button should display work-1 project, not work-0 you're getting.

so add together 1 index:

var thisis = $(this).index() + 1;

or, append click handler you're creating 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 index right console.log(buttonindex ); // rest of click handler code= $('.projects > .project section article[id^="work-"]').eq(buttonindex ).toggle(); $('.project').fadein(1000, 'easeinoutquart'); }); }

this renders button markup 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 setting info need attributes on dom elements relate to, makes much easier see what's going on. , pulling info attributes unlikely alter in jquery, whereas you're shoot in foot .index() function if move you're calling or tweak query.

finally, note .live deprecated in jquery 1.7 , removed in 1.9, might want upgrade , proactively alter other of handlers using .on

php javascript jquery ajax wordpress