我有下一个链接,让用户浏览URL列表(存储在数组中)。当用户点击下一个时,我希望链接href和锚点更新为我阵列中的下一个网站。到目前为止,我尝试过的方式是每次跳过一个网址,而且我知道为什么,它与之前的点击有关,甚至没有完成,但是正确的方法是什么?如何在点击链接时进行链接更新?
下面是一个例子,所以你可以看到什么我谈论: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>
bug:'$('#nextLink')“)' –
@mmmshuddup - (伟大的用户名) - 已修复,谢谢 –
@AdamRackis我喜欢这个解决方案的优雅,我很可能会这样做。你好, – ofko