Question

我正在使用此plugin在简单的老虎机上工作。

我有一个输入字段，用于确定老虎机将随机播放多少次，以及一个显示模式的按钮，然后自动运行老虎机。

在第一次尝试时，它工作正常，但是当我关闭模态并再次运行时。所有结果都是零。

希望你能帮助我。

谢谢。

.machine{
    height: 20px;
    max-height: 20px;
    display: inline-block;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 200px; /* Could be more or less, depending on screen size */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 200px;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

<link href="http://josex2r.github.io/jQuery-SlotMachine/dist/jquery.slotmachine.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://josex2r.github.io/jQuery-SlotMachine/dist/slotmachine.js"></script><script src="http://josex2r.github.io/jQuery-SlotMachine/dist/jquery.slotmachine.js"></script>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<input type="number" id="rolls">
<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content --> 
  <div class="modal-content">
    <span class="close">&times;</span>
     <div id="machine1" class="machine">
       <div>0</div>
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
       <div>5</div>
       <div>6</div>
       <div>7</div>
       <div>8</div>
       <div>9</div>
     </div>
    <div id="machine2" class="machine">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
    <div id="machine3" class="machine">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
    <div id="machine4" class="machine">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
    <div id="machine5" class="machine">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
    <br>
    <br>
    <br>

    <table>
      <tbody></tbody>
    </table>
  </div>
</div>

Traceback (most recent call last):
  File "train.py", line 191, in <module>
    SUMMARY)
  File "train.py", line 45, in train
    wnid_labels, _ = tu.load_imagenet_meta(os.path.join(imagenet_path, 'data/meta.mat'))
  File "/media/chengy/5AB0B28CB0B26E5F/AnacondaFiles/imagenet/tf/train_util.py", line 302, in load_imagenet_meta
    metadata = loadmat(meta_path, struct_as_record=False)
  File "/home/chengy/anaconda3/lib/python3.6/site-packages/scipy/io/matlab/mio.py", line 141, in loadmat
    MR, file_opened = mat_reader_factory(file_name, appendmat, **kwargs)
  File "/home/chengy/anaconda3/lib/python3.6/site-packages/scipy/io/matlab/mio.py", line 64, in mat_reader_factory
    byte_stream, file_opened = _open_file(file_name, appendmat)
TypeError: 'NoneType' object is not iterable

Answer 1

将机器移到按钮单击之外似乎对我来说解决了，当您为每次点击重新创建实例时，插件似乎感到困惑。

如果您想做些更优雅的事情，则可能需要查看文档中的.destroy（）方法。

不是最漂亮的解决方案，但：

var machine1 = $('#machine1').slotMachine();
var machine2 = $('#machine2').slotMachine();
var machine3 = $('#machine3').slotMachine();
var machine4 = $('#machine4').slotMachine();
var machine5 = $('#machine5').slotMachine();

$(document).ready(function(){
  $('#myBtn').click(function(){
    let rolls = $("#rolls").val();
    console.log(rolls);    
    $('#myModal').show();

    var arrResult = [];

    setTimeout(function(){
      machine1.shuffle(10, onComplete);
      machine2.shuffle(15, onComplete);
      machine3.shuffle(20, onComplete);
      machine4.shuffle(25, onComplete);
      machine5.shuffle(30, onComplete);
    }, 500);

    function onComplete(active){
      arrResult.push(this.active);
      if (arrResult.length === 5) {
        var output = arrResult.join('');
        console.log(output);
        rolls--;
        arrResult = [];

        $('table > tbody').append('<tr><td>'+ output +'</td></tr>');

        if(rolls > 0){
          setTimeout(function(){ 
            machine1.shuffle(10, onComplete);
            machine2.shuffle(15, onComplete);
            machine3.shuffle(20, onComplete);
            machine4.shuffle(25, onComplete);
            machine5.shuffle(30, onComplete);
          }, 1500);
        }
      }
    }
  });
  $('.close').click(function(){
    $('.modal').hide();
    $('table tbody tr').remove();
  });
});

您可以通过在每个列表的末尾添加带有0的div来解决一次性问题，这是正在运行的脚本的一个容器

http://jsbin.com/hehuxupapa/1/edit?html,js,output

PS：非常酷的插件

老虎机显示零作为结果

1 个答案: