CODEWITHSUNDEEP
jquery
simonfoust
simonfoust

Reputation: 90

Display text content of an active element in jQuery slot machine

I'm using jQuery-SlotMachine, specifically the randomizer. Here is my HTML: 

<div id="machine1">
    <span class="option">
        <span>Example A</span>
        <span>Example B</span>
    </span>
</div>
<div id="machine2">
    <span class="option">
        <span>Example C</span>
        <span>Example D</span>
    </span>
</div>
<div id="results">
    <span></span>
</div>

Here is my js:

var machine1 = $("#machine1").slotMachine({
    active  : 0,
    delay   : 500
});

var machine2 = $("#machine2").slotMachine({
    active  : 1,
    delay   : 500,
    direction: 'down'
});

function onComplete(active){
    switch(this.element[0].id){
        case 'machine1':
            $("#machine1Result").text(this.active);
            break;
        case 'machine2':
            $("#machine2Result").text(this.active);
            break;
    }

}

$("#randomizeButton").click(function(){

    machine1.shuffle(5, onComplete);

    setTimeout(function(){
        machine2.shuffle(5, onComplete);
    }, 500);

});

So what I'm trying to do is spit out the results in the container called "results". I know that this.active gives me the index number of the current element, but what I want to show is the text value. So inside of I want to show like, "Example B Example C".

I've tried using stuff like var $results = $('.active').text(); with $('#results').html($results); but jQuery isn't my strong suit.

Upvotes: 1

Views: 774

Answers (1)

PerpetualStudent
PerpetualStudent

Reputation: 832

Try the following:

 $(document).ready(function() {
  var machine1 = $("#machine1").slotMachine({
    active: 0,
    delay: 500
  });

  var machine2 = $("#machine2").slotMachine({
    active: 1,
    delay: 500,
    direction: "down"
  });

  var results;

  function onComplete(active) {
    switch (this.element[0].id) {
      case "machine1":
        $("#machine1Result").text(this.active);
        results[0] = getMachineResult($('#machine1'), this.active);
        break;
      case "machine2":
        $("#machine2Result").text(this.active);
        results[1] = getMachineResult($('#machine2'), this.active);
        break;
    }
    $("#results").text(results.join(", "));
  }

  function getMachineResult(i_jqMachine, i_iActive){
      return i_jqMachine.find('span.option > span').eq(i_iActive + 1).text();
  }

  $("#randomizeButton").click(function() {
    results = [];
    $("#results").css('color', 'white').text("");
    machine1.shuffle(5, onComplete);
    setTimeout(function() {
      machine2.shuffle(5, onComplete);
    }, 500);
  });
});

I've initialized a results array to hold the results from each machine as it completes. I've added a getMachineResult routine that will retrieve the results from the machine given its "active" value. I then use this routine to store the results in the array. The concatenated array is then displayed in the #results container.

Lastly, I cleared the results array and the results display when you click the button. The css('color', 'white') was just so I could see the results.

I think that should do it.

Upvotes: 2

Related Questions