我的 .on Swipe 在它中断之前只能工作一次并且必须刷新所有内容 - JQuery Mobile / Javascript
My .on Swipe only works once before it breaks and have to refresh everything - JQuery Mobile / Javascript
所以我设法为我编写了一个脚本,当我点击我的图像时,它会显示一个弹出窗口,当我在图像上向左或向右滑动时,它会显示我 javascript 中隐藏的图像。然而,当我到达我的索引页面时,我去了房子 html。当我点击照片时,在我必须进入我的 javascript 文件并基本上重写滑动功能之前滑动功能不起作用,然后它再次工作,但在我返回我的索引页面后中断。
这是我网站的索引页:http://titan.dcs.bbk.ac.uk/~aaldib01/mad/madfma/index.html
然后房子 > 2 卧室排屋 > house1.html
有什么方法可以让我解决问题或改进我的 javascript 以不再成为问题?
谢谢。
*注意我认为问题出在图像代码的位置。 (我已经删除了大部分其他代码,因为这不影响它)
我试过使用 .bind("swiperight", function() 但它给了我相同的结果。它工作一次然后在我转到 index.html > > house1.html
这是 house1.html 代码(data-role="content":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="css/themes/blue.min.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="images.js"></script>
<title>House 1</title>
</head>
<body>
<div data-role="page" id="house1" data-theme="a" data-dom-cache="true">
<div data-role="content">
<a href="#popupImg" data-rel="popup" data-position-to="window" data-transition="pop">
<img src="pictures/houses/house1/image1.PNG"/ style="width: 50%;"/>
<div data-role="popup" id="popupImg" data-theme="a" class="ui-corner-all">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="pictures/houses/house1/image1.PNG" style="width: 100%;" />
</a>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-id="footernav">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="">Favourites</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
这是 javascript 文件:
$(document).ready(function () {
var i = 0;
var imgURL = [];
imgURL.push('pictures/houses/house1/image1.PNG');
imgURL.push('pictures/houses/house1/image2.PNG');
imgURL.push('pictures/houses/house1/image3.PNG');
imgURL.push('pictures/houses/house1/image4.PNG');
$("#house1").on("swiperight",function () {
if (i < (imgURL.length - 1)) {
i++
} else {
i = 0;
}
var imgStr = "<img src=" + imgURL[i] + " style='width:100%'>";
$('#popupImg').html(imgStr);
});
$("#house1").on("swipeleft",function () {
if (i > 0) {
i--
} else {
i = (imgURL.length - 1);
}
var imgStr = "<img src=" + imgURL[i] + " style='width:100%'>";
$('#popupImg').html(imgStr);
});
});
问题是,如果您从索引页面开始并导航到 House 1,则不会加载您的 image.js
脚本。您可以在直接加载 House 1 时通过查看网站源代码来检查这一点(它会在那里)与从索引开始并浏览到 House 1(它会从 <head>
中消失)。
原因是 jQuery Mobile 使用 AJAX 在页面之间导航。默认情况下,每个页面请求只会更新 <body>
元素,但不会更新 <head>
(更多信息可以在 jQuery Mobile demo page 上找到)。
该页面上引用了一些解决方案:
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit
event (details below) to run necessary code when a specific page is created (which can be determined by its id
attribute, or a number of other ways).
Another approach for page-specific scripting would be to include scripts at the end of the body
element when no data-role=page
element is defined, or inside the first data-role=page
element.
最终由您来决定哪种方法最适合您的特定用例。
所以我设法为我编写了一个脚本,当我点击我的图像时,它会显示一个弹出窗口,当我在图像上向左或向右滑动时,它会显示我 javascript 中隐藏的图像。然而,当我到达我的索引页面时,我去了房子 html。当我点击照片时,在我必须进入我的 javascript 文件并基本上重写滑动功能之前滑动功能不起作用,然后它再次工作,但在我返回我的索引页面后中断。
这是我网站的索引页:http://titan.dcs.bbk.ac.uk/~aaldib01/mad/madfma/index.html
然后房子 > 2 卧室排屋 > house1.html
有什么方法可以让我解决问题或改进我的 javascript 以不再成为问题?
谢谢。
*注意我认为问题出在图像代码的位置。 (我已经删除了大部分其他代码,因为这不影响它)
我试过使用 .bind("swiperight", function() 但它给了我相同的结果。它工作一次然后在我转到 index.html > > house1.html
这是 house1.html 代码(data-role="content":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="css/themes/blue.min.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="images.js"></script>
<title>House 1</title>
</head>
<body>
<div data-role="page" id="house1" data-theme="a" data-dom-cache="true">
<div data-role="content">
<a href="#popupImg" data-rel="popup" data-position-to="window" data-transition="pop">
<img src="pictures/houses/house1/image1.PNG"/ style="width: 50%;"/>
<div data-role="popup" id="popupImg" data-theme="a" class="ui-corner-all">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="pictures/houses/house1/image1.PNG" style="width: 100%;" />
</a>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-id="footernav">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="">Favourites</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
这是 javascript 文件:
$(document).ready(function () {
var i = 0;
var imgURL = [];
imgURL.push('pictures/houses/house1/image1.PNG');
imgURL.push('pictures/houses/house1/image2.PNG');
imgURL.push('pictures/houses/house1/image3.PNG');
imgURL.push('pictures/houses/house1/image4.PNG');
$("#house1").on("swiperight",function () {
if (i < (imgURL.length - 1)) {
i++
} else {
i = 0;
}
var imgStr = "<img src=" + imgURL[i] + " style='width:100%'>";
$('#popupImg').html(imgStr);
});
$("#house1").on("swipeleft",function () {
if (i > 0) {
i--
} else {
i = (imgURL.length - 1);
}
var imgStr = "<img src=" + imgURL[i] + " style='width:100%'>";
$('#popupImg').html(imgStr);
});
});
问题是,如果您从索引页面开始并导航到 House 1,则不会加载您的 image.js
脚本。您可以在直接加载 House 1 时通过查看网站源代码来检查这一点(它会在那里)与从索引开始并浏览到 House 1(它会从 <head>
中消失)。
原因是 jQuery Mobile 使用 AJAX 在页面之间导航。默认情况下,每个页面请求只会更新 <body>
元素,但不会更新 <head>
(更多信息可以在 jQuery Mobile demo page 上找到)。
该页面上引用了一些解决方案:
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the
pageinit
event (details below) to run necessary code when a specific page is created (which can be determined by itsid
attribute, or a number of other ways).Another approach for page-specific scripting would be to include scripts at the end of the
body
element when nodata-role=page
element is defined, or inside the firstdata-role=page
element.
最终由您来决定哪种方法最适合您的特定用例。