0

Eu tenho o seguinte SlotMachine:

Use the API

  <div>
    <div id="casino1" class="slotMachine" style="margin-left: -65px;">
      <div class="slot slot1"></div>
      <div class="slot slot2"></div>
      <div class="slot slot3"></div>
      <div class="slot slot4"></div>
      <div class="slot slot5"></div>
      <div class="slot slot6"></div>
    </div>

    <div id="casino2" class="slotMachine">
      <div class="slot slot1"></div>
      <div class="slot slot2"></div>
      <div class="slot slot3"></div>
      <div class="slot slot4"></div>
      <div class="slot slot5"></div>
      <div class="slot slot6"></div>
    </div>

    <div id="casino3" class="slotMachine">
      <div class="slot slot1"></div>
      <div class="slot slot2"></div>
      <div class="slot slot3"></div>
      <div class="slot slot4"></div>
      <div class="slot slot5"></div>
      <div class="slot slot6"></div>
    </div>
    <div class="btn-group btn-group-justified" role="group">
      <button id="casinoShuffle" type="button" class="btn btn-primary btn-lg">Shuffle!</button>
    </div>
  </div>
</div>

<script id="codeScript5">
    let count = 0;
    const btnShuffle = document.querySelector('#casinoShuffle');
    const casino1 = document.querySelector('#casino1');
    const casino2 = document.querySelector('#casino2');
    const casino3 = document.querySelector('#casino3');
    const mCasino1 = new SlotMachine(casino1, {
      active: 0,
      delay: 1000,
      direction: 'up'
    });
    const mCasino2 = new SlotMachine(casino2, {
      active: 1,
      delay: 2000,
      direction: 'down'
    });

    const mCasino3 = new SlotMachine(casino3, {
      active: 2,
      delay: 3000,
      direction: 'up'
    });
    btnShuffle.addEventListener('click', () => {
      count = 3;
      mCasino1.shuffle(5);
      mCasino2.shuffle(6);
      mCasino3.shuffle(7);
    });
  </script>

Fonte: jQuery-SlotMachine

O que preciso: * Vou trazer o primeiro slot preenchido com os nomes das cidades:

Exemplo:

    <div id="casino1" class="slotMachine" style="margin-left: -65px;">
      <div class="Cidade 1">Cidade 1</div>
      <div class="Cidade 2">Cidade 2</div>
      <div class="Cidade 3">Cidade 3</div>
      <div class="Cidade 4">Cidade 4</div>
      <div class="Cidade 5">Cidade 5</div>
      <div class="Cidade 6">Cidade 6</div>
    </div>

Digamos que ele pare na cidade 1:

Antes de parar o segundo preciso fazer uma consulta no banco de dados para trazer os bairros da cidade que foi selecionado no primeiro slot, exemplo:

<div id="casino2" class="slotMachine">
  <div class="Bairros da Cidade 1"></div>
  <div class="Bairros da Cidade 1"></div>
  <div class="Bairros da Cidade 1"></div>
  <div class="Bairros da Cidade 1"></div>
  <div class="Bairros da Cidade 1"></div>
  <div class="Bairros da Cidade 1"></div>
</div>

Ou seja:

O Slot 1 já vem preenchido.

O Slot 2 é preenchido após a parada do slot 1.

o Slot 3 é preenchido após a parada do slot 2.

Exemplos das consultas:

Slot 1:

select * from cidades

Slot 2:

 select * from cidades where bairro = "Cidade 1";

Slot 3:

select * from cidades where bairro = "Cidade 1" And rua='bairro cidade 1'

O Banco é MySQL.

As consultas são só para exemplificar, mais meu problemas não é me faze-las, mais sim como inclui-las no SlotMachine.

Já me disseram que com o Ajax eu conseguiria fazer a consulta, mais não entendi bem como fazer, alguém poderia me dar uma dica de como montar essa rotina ?

4
  • Qual parte você não entendeu? Como fazer uma requisição ajax ou como utilizar o php para consultar o banco de dados? 29/04/2019 às 15:05
  • Como adicionar o ajax nessa funcão do jquery. @Leandro Angelo 30/04/2019 às 3:47
  • Em qual função? 30/04/2019 às 15:33
  • btnShuffle.addEventListener('click' ..... @LeandroAngelo 3/05/2019 às 5:34

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .