Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery index in array problem
    primarykey
    data
    text
    <p>I have this code. If you click on the next button then click on the prev then the next, then the previous the index output gets mixed up.</p> <p>Eg. When page loads, index is 0. then when I click next the index is 1. Then I click prev and it goes back to 0. So far so good, but when I click next again it goes to 2 and this messes eveything up.</p> <p>Think it may be due to...</p> <pre><code>if (index &lt; 0) { index = lengthMinusOne; }; </code></pre> <p>Been working on this for days. Please help. Very much appreciated.</p> <pre><code>//Image Gallery var imgs = [ ['images/test1.jpg', 'Test1', 'sdfsdfsdfsdf', 'light'], ['images/test2.jpg', 'Test2', 'sdfsdfsdf', 'light'], ['images/Test3.jpg', 'Test3', 'sdfsdfsdfsd.', 'dark'] ]; var cnt = imgs.length; var lengthMinusOne = cnt - 1, index = 0, fadeSpeed = 1000; preload_image_object = new Image(); var i = 0; for (i = 0; i &lt;= cnt; i++) preload_image_object.src = imgs[i]; $("#txt h1").text(imgs[0][1]); $("#txt #desc p").text(imgs[0][2]); var ld = imgs[0][3]; if (ld == "dark") { $("body").addClass("dark"); }; var firstImg = $('&lt;img /&gt;'); $(firstImg).attr('src', imgs[0][0]); $('#supersized').append(firstImg); $(firstImg).hide().fadeIn(fadeSpeed); $("#prev-photo").bind('click', prev); function prev() { index--; $('#prev-photo,#next-photo').unbind(); if (index &lt; 0) { index = lengthMinusOne; }; var ld = imgs[index][3]; if (ld == "dark") { $("body").addClass("dark"); } else { $("body").removeClass("dark"); }; oldImg = $('#supersized img').addClass('old'); $("#txt h1").text(imgs[index][1]).hide().fadeIn(); $("#txt #desc p").text(imgs[index][2]).hide().fadeIn(); var img = new Image(); $(img).load(function () {}).error(function () {}).attr('src', imgs[index][0]); $('#supersized').append(img); $('#supersized img').css('left', '0'); $(img).hide().fadeIn(fadeSpeed, function () { oldImg.remove(); $('#prev-photo').bind('click', prev); $('#next-photo').bind('click', prev); }); console.log(index); }; $("#next-photo").bind('click', next); function next() { index++; $('#next-photo,#prev-photo').unbind(); if (index &gt; lengthMinusOne) { index = 0 }; var ld = imgs[index][3]; if (ld == "dark") { $("body").addClass("dark"); } else { $("body").removeClass("dark"); }; oldImg = $('#supersized img').addClass('old'); $("#txt h1").text(imgs[index][1]).hide().fadeIn(); $("#txt #desc p").text(imgs[index][2]).hide().fadeIn(); var img = new Image(); $(img).load(function () {}).error(function () {}).attr('src', imgs[index][0]); $('#supersized').append(img); $('#supersized img').css('left', '0'); $(img).hide().fadeIn(1300, function () { oldImg.remove(); $('#next-photo').bind('click', next); $('#prev-photo').bind('click', prev); }); console.log(index); }; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload