0

div クラスの配列をランダム化し、ボタンがクリックされるたびに異なる div (事実) をフェードインしようとしています。ただし、私ができないのは、毎回まったく異なる div を表示して、クリック時に div が繰り返されないようにする方法です。

私の現在のコードは次のとおりです。

$(document).ready(function () {

    var facts = Array('.fact1', '.fact2');

    $(document).delegate('a.eggbutton', 'click', function () {

        $(fact).fadeOut('slow');

        var fact = facts[Math.floor(Math.random() * facts.length)];

        $(fact).fadeIn('slow');

    });

});
4

4 に答える 4

3

これが役立つことを願っています: http://jsfiddle.net/AMmwL/6/

コード

function randomFact(){
    var factsArr = $(".fact");
    $(".fact").hide("slow");
    var rnd = Math.floor((Math.random()*(factsArr.length-1)));
    $(factsArr[rnd]).show("slow");
}
于 2013-06-12T12:15:19.127 に答える
2

あなたの問題は、divを表示するときに、他のdivを表示するときにそれを隠していないことだと思います。あなたはそれをやろうとしました$(fact).fadeOut('slow');が、factローカル変数と同様に、期待どおりに機能しません。

最初の解決策として、次のようにグローバルスコープで定義できますwindow.fact = ''

または、divに表示するときにクラスを追加し、次に別のdivを表示するときに、以下のように非表示にします

$(".visibleDivClass").fadeOut('slow').removeClass("visibleDivClass");
...YOUR CODE...
$(fact).fadeIn('slow').addClass("visibleDivClass");
于 2013-06-12T12:10:50.773 に答える
0

次のようなことはどうですか：

var arrayIndex = 0;

$(document).ready(function() {

    var facts = Array('.fact1','.fact2');

    $(document).delegate('a.eggbutton', 'click', function(){ 

    $(fact).fadeOut('slow');

    arrayIndex++;
    if (arrayIndex % facts.length == 0) shuffle(array);

    var fact = facts[arrayIndex % facts.length];

    $(fact).fadeIn('slow');

});

JavaScriptのsuffleメソッドを見つけることができると思いますが、ここにあります：

配列をシャッフルするにはどうすればよいですか?

このアプローチの問題は、シャッフル後に同じ「乱数」を取得できることですが、実行することでさらにランダム化できることです (疑似コードが続きます)。

while (randomNumberForIndexBeforeShuffle == randomNumberForIndexAfterShuffle) {
   arrayIndex++;
   re-calculate randomNumberForIndexAfterShuffle
}
于 2013-06-12T12:09:49.820 に答える