我正在使用App.js(Javascript UI库)和Zepto.js(类似JQuery的库)来制作移动应用程序。下面的代码不是来自我的应用程序,而是展示了我的确切问题。我尽量保持尽可能短。被点击的图像应该在页面1上保持可见状态,然后再次在页面2上显示,但现在被点击的图像在页面1上消失,这使得到页面2的过渡看起来很乱。点击时元素消失
单击图像。如果什么都没有发生,请转到第2页,然后再转到 回到第1页,然后再次单击以查看问题。
任何和每一个帮助,非常感谢。看来这个问题超出了我的技能:D我的猜测是这与我正在使用的库有关。
App.load('page1');
App.controller('page1', function(page) {
$(page).find('img').on('click', function() {
App.load('page2');
$('#clicked-img-container').html($(this));
});
});
App.controller('page2', function(page) {
});
img {
width: 150px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<!-- Default stylesheet provided with App.js.
Contains iOS/Android styles for all included widgets. -->
<link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">
</head>
<body>
<!-- Page1 -->
<div class="app-page" data-page="page1">
<div class="app-topbar">
<h1>Page 1</h1>
</div>
<div class="app-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/13/Red_squirrel_%28Sciurus_vulgaris%29.jpg">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Lightmatter_lioness.jpg">
<div class="app-button" data-target="page2">Go to page 2</div>
<p>Click the images. If nothing happens, go to page2 and then
back to page1 and try clicking again to see the problem I'm experiencing:
<strong>The clicked image disappears when clicked which makes the page transition look messy.</strong></p>
</div>
</div>
<!-- Page1 -->
<div class="app-page" data-page="page2">
<div class="app-topbar">
<h1>Page 2</h1>
</div>
<div class="app-content">
<div id="clicked-img-container"></div>
<div class="app-button" data-target="page1">Go to page 1</div>
</div>
</div>
<!-- jQuery-like library focusing on being lightweight and mobile-friendly -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<!-- core module containing all library functionality -->
<script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</body>
</html>
欢迎SO。 +1创建一个最小的,可验证的例子! – tgogos
我更新了我的答案 – tgogos