Home/ Questions/Q 6861745
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T02:34:27+00:00

I have next link that lets users navigate through a list of URL (stored

  • 0

I have next link that lets users navigate through a list of URL (stored in array). When a user clicks next, I want the link href and anchor to be updated for the next website in my array. The way I’ve tried so far, it link skips one URL each time, and I have and idea why, it has to do with the previous click even not completing, but what’s the right way to do this?

Here is an example so you can see exactly what I’m talking about: http://jsbin.com/atobep

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>


$(document).ready(function(){

    var items = [];
    $.each(urls, function(i, item) {
        items.push("<li>"+item['name']+"</li>");
    });

    $('#list').append(items.join(''));

    changeNextLink(0);
    $("#frame").attr('src', urls[0]['url']);

});

var urls = [{"name":"ebay","url":"http://ebay.com"},{"name":"amazon","url":"http://amazon.com"},{"name":"msn","url":"http://msn.com"},{"name":"yahoo","url":"http://yahoo.com"},{"name":"wikipedia","url":"http://wikipedia.org"}];

function changeNextLink(x){     

    $('#now').html(urls[x]['name']); //show the name of currently loaded page
    $('#nextLink').html(urls[x+1]['name']); //name of next website as anchor of next link
    $('#nextLink').attr('href', urls[x+1]['url']); //url to next website
    $('#nextLink').attr('onclick','changeNextLink('+(x+1)+')'); //the problem spot. prepare next link for next click.

}
</script>
</head>
<body>

    <ol id="list"></ol>

    now: <span id="now"></span> | next: <a href="" target="frame" id="nextLink"></a><br />
    <iframe name="frame" src="" id="frame" style="width:500px; height:600px;"></iframe>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How about adding a new var to keep track of the next link num, and adding a click handler for #nextLine:

    $(document).ready(function(){
    var nextLinkNum = 0;
    var items = [];
    $.each(urls, function(i, item) {
        items.push("<li>"+item['name']+"</li>");
    });

    $('#list').append(items.join(''));

    changeNextLink(nextLinkNum);
    $("#frame").attr('src', urls[0]['url']);

    $('#nextLink').click(function() { 
        if (nextLinkNum + 1 < urls.length)
            changeNextLink(++nextLinkNum); 
    });

});

function changeNextLink(x){     
    $('#now').html(urls[x]['name']); //show the name of currently loaded page
    $('#nextLink').html(urls[x+1]['name']); //name of next website as anchor of next link
    $('#nextLink').attr('href', urls[x+1]['url']); //url to next website
    $('#nextLink').attr('onclick','changeNextLink('+(x+1)+')'); //the problem spot. prepare next link for next click.
}
    • 0