Question

我正在使用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都显示然后重新开始？

还有一种方法可以在重新启动之前显示div 1 - 15然后显示最后一个div（id="last-div"）吗？

注意：点击即可调用所有div，我使用的是jQuery 1.8.2。

我不知道从哪里开始，我已经看过使用Math.random()的脚本，但我不太了解这项工作。

的更新 的

我已经尝试了Ian的答案，但灯箱没有显示（但我可以在控制台日志中看到脚本正在运行）

最初他的剧本中有这个：

$(selector).show();

我改为：

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

调用灯箱需要做什么？

注意：不会抛出任何错误。

Answer 1

所以我的想法与Eric的相似，但我想让它“完全”运作。因此，我只是决定存储一个代表每个div的int数组，而不是存储对数组中所有div的引用。我最终用jQuery选择它们的方式是"#lightbox + i"，所以如果你没有这个确切的结构（其中div有一个像“lightbox”和一个int - 从1到最后一个计数），那么你可以使用.eq()或nth-child。它不会是完全相同的结果，但它将具有相同的随机效果，只是以不同的方式完成。我发现了一个“随机化”一个数组的函数 - 我猜测就像Eric的Shuffle那样。但是我从这里得到了它 - How to randomize (shuffle) a JavaScript array?。我不得不修改它以返回一个新数组而不是修改传递给该函数的数组。此外，我将所有内容保留在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的数组来循环并最终找到。我知道如何做到这一点有很多变化 - 何时/如何存储计数内容，何时/如何随机化数组或检索随机值（以及如何跟踪已使用的数据），在哪里存储所有参考，还有更多。我希望这至少有帮助！

Answer 2

创建一个包含所有这些数组的数组，然后对该数组进行洗牌，然后在每次单击时拉出下一个数组。当你用完时，你可以在必要时重新填充数组。

这样的事情（使用this source中的Shuffle方法）：

Fiddle

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

Answer 3

下面的解决方案通过将一个元素数组传递给一个函数来工作。当显示每个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 );
}

小提琴here

在Click上显示随机div

3 个答案: