クリックすると要素が消えます

私は、モバイルアプリケーションを作るためにApp.js（Javascript UIライブラリ）とZepto.js（JQueryライクなライブラリ）を使用しています。以下のコードは私のアプリケーションからではありませんが、私が持っている正確な問題を示しています。私はできるだけ短くしていました。クリックされたイメージはpage2に再び表示される前にpage1に表示されたままになりますが、クリックされたイメージはpage1で消え、ページ2への遷移が乱雑になります。クリックすると要素が消えます

画像をクリックします。何も起こらない場合は、page2に進み、ページ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>

出典

2017-06-20 Tuomas Koivisto

ようこそSOに。 +1して最小限の検証可能な例を作成する！ – tgogos

私の回答を更新しました – tgogos

。何も起こらない場合は、ページ2に戻り、ページ1に戻り、もう一度クリックしてください。

私はこのフレームワークに精通していませんが、ここで問題はあなたのコードが要素を見つけようとしていることです実際にDOMに追加される前にコントローラを追加してください。私ははじめのページから例をダウンロード：http://code.kik.com/app/3/docs.htmlと異なるアプローチがあることに気づいたので、私はコントローラを追加した後、次のコードを追加：

try { 
    App.restore(); 
} catch (err) { 
    App.load('page1'); 
}

クリックしたときにクリックされた画像は、ページ遷移するどの消えます見えにくい。

あなたはDOMへのイメージのクローンを追加した場合これが解決される。

$('#clicked-img-container').html($(this).clone());

また、デフォルトのトランジションは、あなたのケースに関して厄介であるかもしれないfadeです。あなたはhereのオプションで遊ぶことができます。私はどのようにあなたを示すためにslide-leftを追加しました。

の作業例は、次のとおりです。

//App.load('page1'); 
 

 
App.setDefaultTransition('slide-left'); // global 
 

 
App.controller('page1', function(page) { 
 

 
    $(page).find('img').on('click', function() { 
 
    
 
    App.load('page2'); 
 
    $('#clicked-img-container').html($(this).clone()); 
 

 
    }); 
 
}); 
 

 
App.controller('page2', function(page) { 
 

 
}); 
 

 
try { 
 
    App.restore(); 
 
} catch (err) { 
 
    App.load('page1'); 
 
}

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> 
 

 
    <!-- Page2 --> 
 
    <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>

出典

2017-06-22 09:13:17 tgogos

すごい！たくさんの友達に感謝！ :)私の問題を解決しました。今私はクライアントのための私のアプリケーションのデモビデオを作ることができます。 –

クリックすると要素が消えます

答えて

関連する問題