Results 1 to 3 of 3

Thread: Looping and adding a variable number

  1. #1
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Looping and adding a variable number

    I am trying to reuse my code: colorswap1, colorswap2 etc but for some reason my script is not doing so! please help



    Code:
    <script type="text/javascript">
    $(function() {
    
        var images = ['beige', 'green', 'red','whitebabysmall'];
        var max = images.length;
    	
    	
    	var i = 1-36;
    	
        // Get current image src
        var curSrc = $('#colorswap'[i]).attr('src');
    
        // Find ID in image src
        var curID = curSrc.replace(/.*\/(.*?)\.gif/i, '$1');
    
        var curIdx = 0;
    
        // Search image list for index of current ID
        while (curIdx < max) {
            if (images[curIdx] == curID) {
                break;
            }
            curIdx++;
        }
    
        // For convenience
        var imgSrcBase = '{{ STATIC_URL }}img/creighton/color/';
        
        // Next image on button (and image) click
        $('#swapnextimg,#colorswap').click( function() {
            curIdx = (curIdx+1) % max;
            $("#colorswap").attr('src', imgSrcBase+images[curIdx]+'.gif');
        });
        
        // Prev image on button click
        $('#swapprevsimg').click( function() {
            curIdx = (curIdx+max-1) % max;
            $("#colorswap").attr('src', imgSrcBase+images[curIdx]+'.gif');
        });
    
    
    });

  2. #2
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    You'll need to learn how to use for loops...

    http://www.w3schools.com/js/js_loop_for.asp

    This will help you immensely with your understanding of programming and it will be a lot better than simply giving you the answer.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Actually this is a while loop, not a for loop. The while loop is generally more efficient. I'm not sure why it isn't used more often.

    I'm having a little trouble visualizing how this code is supposed to work. I can see right off some problems with the red part. This:

    Code:
    var i = 1-36;
    says that i = negative 35. I suppose that could be meant to say i could be any number from 1 to 36, that makes more sense.

    The use of the $, is distinctively jQuery-ish. Particularly the $(function(){ construct which is shorthand for the jQuery(document).ready(function(){ construct. And the use of .attr(), which is also jQuery syntax. So I'm assuming that:

    Code:
    var curSrc = $('#colorswap'[i]).attr('src');
    is some kind of an attempt at a jQuery selector. But it's invalid syntax if it is. There can be no -35th item of any collection. And even if there could (if i is a number from 1 to 36), it would be represented by:

    Code:
    $('#colorswap')[i]
    Not as:

    Code:
    $('#colorswap'[i])
    But even that isn't how jQuery should be done. You can. what it does is pull the single element from the collection as an ordinary DOM element. But then it cannot be used with the .attr() function. There are at least two ways you could go with that. I'd chose this one:

    Code:
    var curSrc = $('#colorswap').eq(i).attr('src');
    But there can be only one element on the page with an id of colorswap anyway. So what you probably mean is:

    Code:
    var curSrc = $('#colorswap' + i).attr('src');
    Try that. There could still be other problems with what you're trying to do.

    If you want more help, a working demo including the required HTML markup of the code when there was only one colorswap element would be helpful. And we would need to see the current code with it's markup as well.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •