Menu
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>
950
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.
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
