我的.on Swipe只能在它休息之前工作一次并且必须刷新一切--JQuery Mobile / Javascript
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我的.on Swipe只能在它休息之前工作一次并且必须刷新一切--JQuery Mobile / Javascript相关的知识,希望对你有一定的参考价值。
所以当我点击我的图像时,我设法为我设置了一个脚本,它显示了一个弹出窗口,当我向左或向右滑动图像时,它会在我的javascript中显示隐藏的图像。然而,当我到我的索引页面,我去了房子的html。当我点击照片时,滑动功能在我必须进入我的javascript文件之前不起作用,并且在它再次工作之前基本上重写了滑动功能,但是在我回到我的索引页面之后又打破了。
这是我网站的索引页面:http://titan.dcs.bbk.ac.uk/~aaldib01/mad/madfma/index.html
房屋> 2卧室梯田>房子1.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(它将在那里)与开始时查看站点的来源来检查在索引和浏览到1号房子(它将从<head>
失踪)。
原因是jQuery Mobile使用AJAX在页面之间导航。默认情况下,每个页面请求只会更新<body>
元素,但不会更新<head>
(更多信息可以在此jQuery Mobile demo page上找到)。
该页面上引用了一些解决方案:
构建jQuery Mobile站点时最简单的方法是在每个页面的头部引用同一组样式表和脚本。如果您需要加载特定页面的特定脚本或样式,我们建议将逻辑绑定到
pageinit
事件(详细信息如下),以便在创建特定页面时运行必要的代码(可以通过其id
属性或数字来确定)其他方式)。页面特定脚本的另一种方法是在没有定义
body
元素时或在第一个data-role=page
元素内包含data-role=page
元素末尾的脚本。
最终,由您决定哪种方法对您的特定用例最有意义。
以上是关于我的.on Swipe只能在它休息之前工作一次并且必须刷新一切--JQuery Mobile / Javascript的主要内容,如果未能解决你的问题,请参考以下文章