1

Colorbox Lightbox スクリプトを使用して、ページ上の非表示の div を呼び出しています。それはうまく機能しますが、落とし穴があります。15個の隠しdivがあります。リンクがクリックされると、すべてが表示されるまで繰り返さずに毎回新しいライトボックスを表示したいと思います。これを行う方法がわかりません。

ライトボックスを呼び出すコードは次のとおりです。

$(".colorbox").colorbox({
    inline:true 
});

非表示の div の HTML は次のとおりです。

<div class="hide">
 <div id="lightbox1">
    <!-- Content --> 
 </div>
 <div id="lightbox2">
    <!-- Content --> 
 </div>
 <!-- etc -->
</div>

すべてが表示されるまで各 div をランダムに呼び出してから、最初からやり直すにはどうすればよいですか?

また、div 1 ～ 15 が表示されid="last-div"たら、再起動する前に最後の div () を表示する方法はありますか?

注: すべての div はクリックで呼び出され、私は jQuery 1.8.2 を使用しています。

どこから始めればよいかわかりません。スクリプトを使用しているのを見たことMath.random()がありますが、それを機能させるのに十分な理解がありません。

アップデート

Ian の回答を試しましたが、ライトボックスが表示されません (ただし、スクリプトが機能していることはコンソール ログで確認できます)。

もともと彼はスクリプトにこれを持っています：

$(selector).show();

私はこれに変更しました：

$(selector).colorbox({inline:true });

ライトボックスを呼び出すにはどうすればよいですか?

注: エラーはスローされません。

4

3 に答える 3

3

私のアイデアはエリックのアイデアに似ていましたが、「完全に」機能させたいと考えていました。したがって、すべての div への参照を配列に格納する代わりに、各 div を表す int の配列を格納することにしました。私が最終的にjQueryでそれらを選択する方法"#lightbox + i"は. まったく同じ結果にはなりませんが、方法が異なるだけで同じランダム効果が得られます。配列を「ランダム化」する関数を見つけました - エリックの機能と同じように推測しています。しかし、ここから入手しました - How to randomize (shuffle) a JavaScript array?.eq()nth-childShuffle. 関数に渡された配列を変更するのではなく、新しい配列を返すように変更する必要がありました。document.readyまた、グローバルスコープではなく、すべてをスコープに保持したため、多くのものが渡されたり返されたりします。以前はall、randomedグローバルに宣言して宣言し、それらを渡さなかったときは問題なく機能していましたが、グローバルではないため、これは「より良い」と思いました。

フィドルは次のとおりです。

http://jsfiddle.net/6qYCL/1/

そして、ここにJavascriptがあります：

$(document).ready(function () {
    var all,
        randomed;

    all = generateAll();
    randomed = generateRandomed(all);

    $("#generator").on("click", function (evt) {
        evt.preventDefault();
        randomed = doNext(all, randomed);
    });
});

function generateAll() {
    // Generates the array of "all" divs to work on
    var a = [];
    var divs = $(".hide > div.lightbox");
    for (var i = 1; i <= divs.length; i++) {
        a.push(i);
    }
    console.log("List of divs available to toggle: " + a);
    return a;
}

function generateRandomed(all) {
    // Randomizes the original array
    randomed = fisherYates(all);
    console.log("Setting randomized array: " + randomed);
    return randomed;
}

function doNext(all, randomed) {
    $(".lightbox, #last-div").hide();

    if (randomed.length < 1) {
        console.log("All lightboxes toggled, showing last, then starting over");
        $("#last-div").show();
        randomed = generateRandomed(all);
    } else {
        var next = randomed.shift();
        var selector = "#lightbox" + next;
        console.log("Showing " + selector);
        $(selector).show();
        console.log("What's left: " + randomed);
    }

    return randomed;
}

// Randomizes an array and returns the new one (doesn't modify original)
function fisherYates ( myArray ) {
  var return_arr = myArray.slice(0);
  var i = return_arr.length;
  if ( i == 0 ) return false;
  while ( --i ) {
     var j = Math.floor( Math.random() * ( i + 1 ) );
     var tempi = return_arr[i];
     var tempj = return_arr[j];
     return_arr[i] = tempj;
     return_arr[j] = tempi;
  }
  return return_arr;
}

#new-divあなたが言及したようにリストと表示の最後に到達し、プロセスを最初からやり直すことを説明します。ブラウザのコンソールを見ると、初期化中およびリンクをクリックしたときに何が起こっているかを「見る」ことができます。

これはあなたが探していたものに近いと思います。どちらがより良い解決策なのかわかりません-要素への参照を保存するか、ループして最終的に見つけるための単にintの配列を保存します。これを行う方法には多くのバリエーションがあることを知っています-カウントのものをいつ/どのように保存するか、いつ/どのように配列をランダム化するか、ランダムな値を取得するか(および使用されたものを追跡する方法)、すべてを保存する場所参考文献、その他多数。これが少なくとも役立つことを願っています！

于 2012-10-31T03:20:29.753 に答える
2

それらすべての配列を作成し、その配列をシャッフルし、クリックするたびに次の配列をプルします。不足した場合は、必要に応じてアレイを再作成できます。

このようなもの（このソースShuffleからのメソッドを使用）：

フィドル

var array = $(".hide div").toArray(); // Add all divs within the hide div to an array
var randomArray = Shuffle(array); // Shuffle the array

$("a").click(function() {
    if (randomArray.length > 0)
        alert(randomArray.shift().innerHTML); // Show contents of div, as an example
    else
        alert("None left!");
    return false;
});
于 2012-10-31T02:25:47.513 に答える
-1

以下の解決策は、要素の配列を関数に渡すことによって機能します。各 div が表示されると、配列から取り出されます。次に、配列に残っている div から、次の div がランダムに選択されます。

// call this function on page load
function begin( ) { 

    var arr = $(".hide div").toArray();   
    // further elements can be added to arr i.e. last-div 
    showDivs( arr.length, arr );
}   

// begin displaying divs
function showDivs( numberOfDivs, divArray ) {
    var i, lastDiv;

    function nextDiv( ) {

        // depending on number of slides left get random number
        i = randomInt( numberOfDivs ); 
        if( lastDiv ) { $(lastDiv).hide() };

        $( divArray[ i ] ).fadeIn( 3000 );

        // now that this div has been displayed
        // remove from array and cache
        lastDiv = divArray.splice( i, 1 );

        numberOfDivs--;

        // no more divs to display
        if( numberOfDivs == 0 ) { return };

        setTimeout( nextDiv, 4000);
    }

    setTimeout( nextDiv, 1000);

}

// calculate next random index
function randomInt( divsLeft ) {
   var i = Math.random() * divsLeft;
   return Math.round( i );
}

ここでフィドル

于 2012-10-31T03:52:29.797 に答える