Question

我已经设法使用以下代码构建了一个基本的flashcard应用程序：

    var currentpage, preventpage;

$(document).on('swipeleft', '.ui-page', function(event){ 
preventspin()
if(event.handled !== true) // This will prevent event triggering more then once
{    
    var nextpage = $.mobile.activePage.next('[data-role="page"]');
    // swipe using id of next page if exists

    if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
    }
    event.handled = true;
}
return false;         
});

//swiperight event
$(document).on('swiperight', '.ui-page', function(event){ 
preventspin()    
    if(event.handled !== true) // This will prevent event triggering more then once
{      
    var prevpage = $(this).prev('[data-role="page"]');
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
    }
    event.handled = true;
return false;        });

});



$(document).on("tap", ".card", function (event){
  if (preventpage == 0) {
   currentpage = $(this).parent().attr("id");

//create the info card and display it   
$("body").append('<div data-role="page" id="infocard"><div class="infocard">        <a class="info-card">This is info for '+currentpage+' Tap again to flip the card back</a></div></div>');
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#infocard", { transition: "flip"}) 
  }  
});

//tap event for info card. goes back to the card
$(document).on("tap", ".infocard", function (event){
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#"+currentpage, { transition: "flip", reverse: true })
setTimeout(function() {
$("#infocard").remove()
}, 500);
 });

https://jsfiddle.net/inthevidual/kLyxped4/

我设法实现了基本的滑动到浏览和点击翻转功能，但我想将问题和答案存储在数组中，而不是将它们作为静态HTML存储。正如您所看到的，所有卡片的另一面是一组静态数据，我也希望这也是一个数组，在刷卡时移动两个数组，以便我得到：

前面：问题1，问题2等翻转：answer1，answer2等。

Answer 1

一个更好的阵列 [{q: question1 , a:answer1}, {q:question2, a:answer2}...]

您已经存储了索引currentpage，使用它来获取阵列中的特定数据并相应地显示它。您应该能够访问对象属性 -

question = data.q

answer = data.a

构建一个jQuery flashcard应用程序，使用数组来存储问题和答案

1 个答案: