javascript中的上一个和下一个功能 [英] Previous and next functionality in javascript
问题描述
大家好，
我正在准备导航应用程序。在这个应用程序中，我想在地图菜单上放置上一个/下一个按钮。为此，我以多种形式编写代码。
实际上在地图平移时，URL中的坐标正在变化，URL不会保存在浏览器历史记录中。
示例用于澄清的网址。
http：//network/index.html#/map/17.775178,73.791582,10z
http：// network / index.html＃/ map / 16.041423,76.043410,10z
http：//network/index.html#/map/11.298843,99.014032,10z
http：// network / index.html＃/ map / 8.944884,99.075045,10z
基于这种类型的URL我想执行上一个/下一个功能。
为此，我想将每个URL存储在数组中并根据索引检索URL。为此我做了以下代码。
<！DOCTYPE html>
< html xmlns =http://www.w3.org/1999/xhtml> ;
< head>
< title>< / title>
< script type =text / javascriptsrc = http://code.jquery.com/jquery.js\"></script>
< script type =text / javascript>
var URLlist = [];
var ind = 0;
$（document）.ready（function（）{
$（button ）.click（function（）{
URLlist [ind] = pageURL;
ind = ind + 1;
alert（pageURL） ;
}）;
}）;
函数goBkHist（a）{
var l_ref = ind - 2;
var pageURL2 = URLlist [l_ref];
ind = l_ref + 1;
loadURL（pageURL2）;
}
函数goFdHist（a）{
var l_ref_2 = ind;
var pageURL2 = URLlist [l_ref_2];
ind = l_ref_2 + 1;
loadURL （pageURL2）;
}
函数loadURL（newLocation）{
window.location = newLocation;
return false;
}
< / script>
< / head>
< body>
< input type =buttonvalue =上一个onclick =goBkHist（-1）/>
< input type =buttonvalue =Nextonclick =goFdHist（1）/>
< button type =button>
获取网址< ; / button>
< / body>
< / html>
点击获取URL我正在将URL存储到数组中，然后单击上一个/下一个它将转到该URL。
我想根据地址栏中更改的URL存储URL。但我无法根据地址栏中的URL更改获取URL。
我决定使用鼠标事件来存储这个我尝试onmousedown事件的URL来存储数组中的URL但是当我点击上一个/下一个按钮时它不能正常工作。
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>< / title>
< script type =text / javascriptsrc =http://code.jquery.com/jquery.js>< / script> ;
< script type =text / javascript>
var urllist = [];
var ind = 0;
函数whichbutton（event）{
urllist [ind] = pageURL;
ind = ind + 1;
alert （pageURL）;
}
函数goBkHist（a）{
var l_ref = ind - 2;
var pageURL2 = urllist [l_ref];
ind = l_ref + 1;
loadUrl（pageURL2）;
}
函数goFdHist（a）{
var l_ref_2 = ind;
var pageURL2 = urllist [l_ref_2];
ind = l_ref_2 + 1 ;
loadUrl（pageURL2）;
}
函数loadUrl（newLocation）{
window.location = newLocation;
返回false;
}
< / script>
< / head>
< body>
< div onmousedown =whichbutton（event）>
< input type =buttonvalue =BACK onclick =goBkHist（-1）/>
< input type =buttonvalue =FORWARDonclick =goFdHist（1）/>
< button type =button>
获取网址< / button>
< / div>
< /正文>
< / html>
任何人请告诉我实现此功能的可能解决方案。
如何在没有任何事件性能的情况下存储URL？我想在地址栏中更改网址时将网址存储到数组中。
我尝试了什么：
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>< / title>
< script type =text / javascriptsrc =http://code.jquery.com/jquery.js>< ; / script>
< script type =text / javascript>
var urllist = [];
var ind = 0 ;
函数whichbutton（事件）{
urllist [ind] = pageURL;
ind = ind + 1;
alert（pageURL）;
}
函数goBkHist（a）{
var l_ref = ind - 2;
var pageURL2 = urllist [l_ref];
ind = l_ref + 1;
loadUrl（pageURL2）;
}
函数goFdHist（a）{
var l_ref_2 = ind;
var pageURL2 = urllist [l_ref_2];
ind = l_ref_2 + 1;
loadUrl（pageURL2）;
}
函数loadUrl（newLocation）{
window.location = newLocation;
返回false;
}
< / script>
< / head>
< body>
< div onmousedown =whichbutton（event）>
< input type =buttonvalue =BACKonclick =goBkHist（-1） />
< input type =buttonvalue =FORWARDonclick =goFdHist（1）/>
< button type =按钮>
获取网址< /按钮>
< / div>
< / body>
< / html>
Hi All,
I am preparing navigation application. In this application I want to place "Previous/Next" buttons on map menu. For this I wrote code in many forms.
Actually at the time of map pan the coordinates in URL are getting change and the URL is not saved in browser history.
Example URL for clarification.
http://network/index.html#/map/17.775178,73.791582,10z
http://network/index.html#/map/16.041423,76.043410,10z
http://network/index.html#/map/11.298843,99.014032,10z
http:// network/index.html#/map/8.944884,99.075045,10z
Based on this type of URLs I want to perform "Previous/Next" functionality.
For this I want to store every URL in array and retrieve the URLs based on index. For this I did following code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var URLlist = [];
var ind = 0;
$(document).ready(function () {
$("button").click(function () {
URLlist[ind] = pageURL;
ind = ind + 1;
alert(pageURL);
});
});
function goBkHist(a) {
var l_ref = ind - 2;
var pageURL2 = URLlist[l_ref];
ind = l_ref + 1;
loadURL(pageURL2);
}
function goFdHist(a) {
var l_ref_2 = ind;
var pageURL2 = URLlist[l_ref_2];
ind = l_ref_2 + 1;
loadURL(pageURL2);
}
function loadURL(newLocation) {
window.location = newLocation;
return false;
}
</script>
</head>
<body>
<input type="button" value="Previous " onclick="goBkHist(-1)" />
<input type="button" value="Next" onclick="goFdHist(1)" />
<button type="button">
Get URL</button>
</body>
</html>
By click on "Get URL" I am storing URL into array and click on "Previous/Next" it goes to that URL.
I want to store URLs based on the URL changed in address bar. But I am unable to get URLs based on URL change in Address bar.
I decided to use mouse events to store URLs for this I tried "onmousedown" event to store URL in array but when I click on "Previous/Next" buttons it is not working fine.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var urllist = [];
var ind = 0;
function whichbutton(event) {
urllist[ind] = pageURL;
ind = ind + 1;
alert(pageURL);
}
function goBkHist(a) {
var l_ref = ind - 2;
var pageURL2 = urllist[l_ref];
ind = l_ref + 1;
loadUrl(pageURL2);
}
function goFdHist(a) {
var l_ref_2 = ind;
var pageURL2 = urllist[l_ref_2];
ind = l_ref_2 + 1;
loadUrl(pageURL2);
}
function loadUrl(newLocation) {
window.location = newLocation;
return false;
}
</script>
</head>
<body>
<div onmousedown="whichbutton(event)">
<input type="button" value="BACK " onclick="goBkHist(-1)" />
<input type="button" value="FORWARD" onclick="goFdHist(1)" />
<button type="button">
Get URL</button>
</div>
</body>
</html>
Any one please tell me possible solution for doing this functionality.
How can I store URLs without any event performance? I want to store URLs into Array at the time of url changed in Address bar.
What I have tried:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var urllist = [];
var ind = 0;
function whichbutton(event) {
urllist[ind] = pageURL;
ind = ind + 1;
alert(pageURL);
}
function goBkHist(a) {
var l_ref = ind - 2;
var pageURL2 = urllist[l_ref];
ind = l_ref + 1;
loadUrl(pageURL2);
}
function goFdHist(a) {
var l_ref_2 = ind;
var pageURL2 = urllist[l_ref_2];
ind = l_ref_2 + 1;
loadUrl(pageURL2);
}
function loadUrl(newLocation) {
window.location = newLocation;
return false;
}
</script>
</head>
<body>
<div onmousedown="whichbutton(event)">
<input type="button" value="BACK " onclick="goBkHist(-1)" />
<input type="button" value="FORWARD" onclick="goFdHist(1)" />
<button type="button">
Get URL</button>
</div>
</body>
</html>
推荐答案
（document）.ready（function（）{
(document).ready(function () {
（ 按钮）。单击（function（）{
URLlist [ind] = pageURL;
ind = ind + 1;
alert（pageURL）;
}）;
}）;
函数goBkHist（a）{
var l_ref = ind - 2;
var pageURL2 = URLlist [l_ref] ;
ind = l_ref + 1;
loadURL（pageURL2）;
}
函数goFdHist（a） {
var l_ref_2 = ind;
var pageURL2 = URLlist [l_ref_2];
ind = l_ref_2 + 1;
loadURL（pageURL2）;
}
函数loadURL（newLocation）{
window.location = newLocation;
返回false;
}
< / script>
< / head>
< body>
< input type =buttonvalue =上一个onclick =goBkHist（-1）/>
< input type =buttonvalue =Nextonclick =goFdHist（1）/>
< button type =button>
获取网址< / button>
< / body>
< / html>
单击获取URL我将URL存储到数组中并单击上一个/下一个它将转到该URL。
我想根据URL更改存储URL在地址栏。但我无法根据地址栏中的URL更改获取URL。
我决定使用鼠标事件来存储这个我尝试onmousedown事件的URL来存储数组中的URL但是当我点击上一个/下一个按钮时它不能正常工作。
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>< / title>
< script type =text / javascriptsrc =http://code.jquery.com/jquery.js>< / script> ;
< script type =text / javascript>
var urllist = [];
var ind = 0;
函数whichbutton（event）{
urllist [ind] = pageURL;
ind = ind + 1;
alert （pageURL）;
}
函数goBkHist（a）{
var l_ref = ind - 2;
var pageURL2 = urllist [l_ref];
ind = l_ref + 1;
loadUrl（pageURL2）;
}
函数goFdHist（a）{
var l_ref_2 = ind;
var pageURL2 = urllist [l_ref_2];
ind = l_ref_2 + 1 ;
loadUrl（pageURL2）;
}
函数loadUrl（newLocation）{
window.location = newLocation;
返回false;
}
< / script>
< / head>
< body>
< div onmousedown =whichbutton（event）>
< input type =buttonvalue =BACK onclick =goBkHist（-1）/>
< input type =buttonvalue =FORWARDonclick =goFdHist（1）/>
< button type =button>
获取网址< / button>
< / div>
< /正文>
< / html>
任何人请告诉我实现此功能的可能解决方案。
如何在没有任何事件性能的情况下存储URL？我想在地址栏中更改网址时将网址存储到数组中。
我尝试了什么：
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>< / title>
< script type =text / javascriptsrc =http://code.jquery.com/jquery.js>< ; / script>
< script type =text / javascript>
var urllist = [];
var ind = 0 ;
函数whichbutton（事件）{
urllist [ind] = pageURL;
ind = ind + 1;
alert（pageURL）;
}
函数goBkHist（a）{
var l_ref = ind - 2;
var pageURL2 = urllist [l_ref];
ind = l_ref + 1;
loadUrl（pageURL2）;
}
函数goFdHist（a）{
var l_ref_2 = ind;
var pageURL2 = urllist [l_ref_2];
ind = l_ref_2 + 1;
loadUrl（pageURL2）;
}
函数loadUrl（newLocation）{
window.location = newLocation;
返回false;
}
< / script>
< / head>
< body>
< div onmousedown =whichbutton（event）>
< input type =buttonvalue =BACKonclick =goBkHist（-1） />
< input type =buttonvalue =FORWARDonclick =goFdHist（1）/>
< button type =按钮>
获取网址< /按钮>
< / div>
< / body>
< / html>
("button").click(function () {
URLlist[ind] = pageURL;
ind = ind + 1;
alert(pageURL);
});
});
function goBkHist(a) {
var l_ref = ind - 2;
var pageURL2 = URLlist[l_ref];
ind = l_ref + 1;
loadURL(pageURL2);
}
function goFdHist(a) {
var l_ref_2 = ind;
var pageURL2 = URLlist[l_ref_2];
ind = l_ref_2 + 1;
loadURL(pageURL2);
}
function loadURL(newLocation) {
window.location = newLocation;
return false;
}
</script>
</head>
<body>
<input type="button" value="Previous " onclick="goBkHist(-1)" />
<input type="button" value="Next" onclick="goFdHist(1)" />
<button type="button">
Get URL</button>
</body>
</html>
By click on "Get URL" I am storing URL into array and click on "Previous/Next" it goes to that URL.
I want to store URLs based on the URL changed in address bar. But I am unable to get URLs based on URL change in Address bar.
I decided to use mouse events to store URLs for this I tried "onmousedown" event to store URL in array but when I click on "Previous/Next" buttons it is not working fine.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var urllist = [];
var ind = 0;
function whichbutton(event) {
urllist[ind] = pageURL;
ind = ind + 1;
alert(pageURL);
}
function goBkHist(a) {
var l_ref = ind - 2;
var pageURL2 = urllist[l_ref];
ind = l_ref + 1;
loadUrl(pageURL2);
}
function goFdHist(a) {
var l_ref_2 = ind;
var pageURL2 = urllist[l_ref_2];
ind = l_ref_2 + 1;
loadUrl(pageURL2);
}
function loadUrl(newLocation) {
window.location = newLocation;
return false;
}
</script>
</head>
<body>
<div onmousedown="whichbutton(event)">
<input type="button" value="BACK " onclick="goBkHist(-1)" />
<input type="button" value="FORWARD" onclick="goFdHist(1)" />
<button type="button">
Get URL</button>
</div>
</body>
</html>
Any one please tell me possible solution for doing this functionality.
How can I store URLs without any event performance? I want to store URLs into Array at the time of url changed in Address bar.
What I have tried:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var urllist = [];
var ind = 0;
function whichbutton(event) {
urllist[ind] = pageURL;
ind = ind + 1;
alert(pageURL);
}
function goBkHist(a) {
var l_ref = ind - 2;
var pageURL2 = urllist[l_ref];
ind = l_ref + 1;
loadUrl(pageURL2);
}
function goFdHist(a) {
var l_ref_2 = ind;
var pageURL2 = urllist[l_ref_2];
ind = l_ref_2 + 1;
loadUrl(pageURL2);
}
function loadUrl(newLocation) {
window.location = newLocation;
return false;
}
</script>
</head>
<body>
<div onmousedown="whichbutton(event)">
<input type="button" value="BACK " onclick="goBkHist(-1)" />
<input type="button" value="FORWARD" onclick="goFdHist(1)" />
<button type="button">
Get URL</button>
</div>
</body>
</html>
不要试图发明自己的历史管理解决方案。使用内置历史记录API [ ^ ]。
如果您需要支持旧版浏览器，请使用 polyfill [ ^ ]。
Don't try to invent your own history management solution. Use the built-in history API[^].
If you need to support older browsers, use a polyfill[^].
这篇关于javascript中的上一个和下一个功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
