当单击链接时，我该如何使链接自动更新？

Question

当单击链接时，我该如何使链接自动更新？

5

我有一个链接，让用户可以浏览存储在数组中的URL列表。当用户点击“下一页”时，我希望链接的href和锚点更新为数组中的下一个网站。到目前为止，我尝试过的方法是每次跳过一个URL，我有一个想法是之前的点击事件没有完成，但正确的做法是什么呢？以下是一个示例，您可以看到我在说什么：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>

- userBG

2个回答

0

我对你的JavaScript进行了一些细微的更改，现在看起来它正常工作了...

http://jsbin.com/atobep/5/edit

首先，它会检查列表中是否有下一个URL，如果没有，则将下一个URL设置为当前URL（如果需要，可以将其设置回第一个URL）。如果列表中还有其他URL，则将其设置为下一个URL。

- Kemal Fadillah

SO的问答部分的重点之一是与公众分享您所做的更改以及原因，而不仅仅是粘贴代码链接。 - jfriend00

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam Rackis · Accepted Answer

如何添加一个新的变量来跟踪下一个链接编号，并为 #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.
}