javascript - jquery 幸运轮得到错误的结果

Question

我正在使用 jquery 创建一个幸运轮，并想从纺车中获取准确的数字

我在 html 中使用 Jquery

var prices = [{
  name: '0'
}, {
  name: '1'
}, {
  name: '2'
}, {
  name: '3'
}, {
  name: '4'
}, {
  name: '5'
}, {
  name: '6'
}, {
  name: '7'
}, {
  name: '8'
}, {
  name: '9'
}, {
  name: '10'
}, {
  name: '11'
}, {
  name: '12'
}, {
  name: '13'
}, {
  name: '14'
}, {
  name: '15'
}, {
  name: '16'
}, {
  name: '17'
}, {
  name: '18'
}, {
  name: '19'
}, {
  name: '20'
}, {
  name: '21'
}, {
  name: '22'
}, {
  name: '23'
}, {
  name: '24'
}, {
  name: '25'
}, {
  name: '26'
}, {
  name: '27'
}, {
  name: '28'
}, {
  name: '29'
}, {
  name: '31'
}, {
  name: '32'
}, {
  name: '33'
}, {
  name: '34'
}, {
  name: '35'
}, {
  name: '36'
}];

$(function() {
  var $r = $('.roulette').fortune(prices);

  var clickHandler = function() {
    $('.spinner').off('click');
    $('.spinner span').hide();
    $r.spin().done(function(price) {
      $('.price').text('You have: ' + price.name);
      $('.spinner').on('click', clickHandler);
      $('.spinner span').show();
    });
  };

  $('.spinner').on('click', clickHandler);
});

我不确定我将使用这段代码去哪里。每次旋转都会给我不正确的结果。可能是我对这个纺车背后的逻辑感到困惑。请帮我解决这个问题

这是我目前创建的实例。请指导我如何获得准确的结果

http://codepen.io/anon/pen/bWwVVj

Answer 1

问题是因为您的 prices 数组是按数字顺序排列的。它应该与轮盘上显示的值的顺序相同，如下所示:

var prices = [
  { name: 0 }, 
  { name: 26 }, 
  { name: 3 }
  // ...
];

Updated Codepen

另请注意，只有一个属性的对象数组非常多余。您可以只使用整数数组，如下所示:

var prices = [0, 26, 3, 35, 12, 28, 7, 29, 18, 22, 9, 31, 14, 20, 1, 33, 16, 24, 5, 10, 23, 8, 30, 11, 36, 13, 27, 6, 34, 17, 25, 2, 21, 4, 19, 15, 32];

Updated Codepen