时间戳

首页 > 解决方案 > 如何让这个 JS 显示下一张卡片而不是随机卡片？

javascript - 如何让这个 JS 显示下一张卡片而不是随机卡片？

问题描述

我正在使用 HTML、CSS 和 JS 开发一个刷卡项目。

我从 codepen 获取了这个 JS 代码并实现了它，但问题是卡片是随机的。如何使其按顺序排列（不重复）？ 

angular.module('starter', ['ionic', 'ionic.contrib.ui.cards'])
  .directive('noScroll', function($document) {
    return {
      restrict: 'A',
      link: function($scope, $element, $attr) {
        $document.on('touchmove', function(e) {
          e.preventDefault();
        });
      }
    }
  })

  .controller('CardsCtrl', function($scope, $ionicSwipeCardDelegate) {
    var cardTypes = [
      {title: '1'},
      {title: '2'},
      {title: '3'},
      {title: '4'},
      {title: '5'}
    ];

    $scope.cards = Array.prototype.slice.call(cardTypes, 0, 0);

    $scope.cardSwiped = function(index) {
      $scope.addCard();
    };

    $scope.cardDestroyed = function(index) {
      $scope.cards.splice(index, 1);
    };

    $scope.addCard = function() {
      var newCard = cardTypes[
        Math.floor(Math.random() * cardTypes.length)
      ];
      newCard.id = Math.random();
      $scope.cards.push(angular.extend({}, newCard));
    }
  })

  .controller('CardCtrl', function($scope, $ionicSwipeCardDelegate) {
    $scope.goAway = function() {
      var card = $ionicSwipeCardDelegate.getSwipeableCard($scope);
      card.swipe();
    };
  });

标签： javascriptjqueryhtmlcssangularjs

解决方案

我会更改以下内容：

$scope.cards = Array.prototype.slice.call(cardTypes, 0, 0);

将其替换为：

$scope.cards = cardTypes; // this keeps the series ordered as is defined

您可能想要.reverse()cardTypes 所以数组中的第一项是第一张卡片（卡片实际上是从数组中弹出的，所以如果您不反转它，最后一项将是第一张卡片）：

$scope.cards = cardTypes.reverse(); // reverse the array

然后似乎每次刷卡后都会随机添加新卡：

$scope.cardSwiped = function(index) {
  $scope.addCard();
};

也许你可以评论整个事情，或者只是$scope.addCard()如果它破坏了应用程序。

推荐阅读