jQueryスロットマシンのアクティブな要素のテキストコンテンツを表示

Question

私はjQuery-SlotMachine、特にランダマイザを使用しています。

<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> 

ここ

である私のJS：ここに私のHTMLです

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); 

}); 

だから私は「結果」と呼ばれるコンテナに結果を吐き出すている何をしようとしています。私はthis.Aactiveが私に現在の要素のインデックス番号を与えることを知っていますが、私が表示したいのはテキスト値です。そこで、私は "Example B Example C"のように見せたいと思います。

var $ results = $（ '。active'）のようなものを使ってみました。 $（ '＃results'）を使ってください。しかし、jQueryは私の強い訴訟ではありません。

Answer 1

は、以下のことを試してみてください。

$(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); 
    }); 
}); 

私はそれが完了すると、各マシンからの結果を保持するために、結果の配列を初期化してきました。私はgetMachineResultルーチンを追加しました。このルーチンは、 "アクティブ"な値が与えられたマシンから結果を取得します。次に、このルーチンを使用して結果を配列に格納します。連結されたアレイは、#resultsコンテナに表示されます。

最後に結果の配列をクリアし、ボタンをクリックすると結果が表示されます。 css('color', 'white')はちょうど私が結果を見ることができた。

私はそれをするべきだと思います。