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

所以我的想法与 Eric 的想法相似，但我想让它“完全”发挥作用。因此，我没有将所有 div 的引用存储在一个数组中，而是决定存储一个表示每个 div 的整数数组。我最终使用 jQuery 选择它们的方式是"#lightbox + i"，所以如果你没有这个确切的结构（其中 div 有一个像“lightbox”这样的 id 和一个 int - 从 1 到最后一个计数），那么你可以使用.eq()or nth-child。它不会是完全相同的结果，但它会产生相同的随机效果，只是以不同的方式完成。我找到了一个“随机化”数组的函数——我猜像 Eric 所做的Shuffle那样。但这是我从中得到它的地方 -如何随机化（随机播放）JavaScript 数组？. 我不得不修改它以返回一个新数组，而不是修改传递给函数的数组。此外，我将所有内容都保留在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像您提到的那样显示，然后重新开始该过程。如果您查看浏览器的控制台，您可以“观察”初始化期间和单击链接时发生的情况。

我认为这与您正在寻找的内容很接近。我不确定哪个是更好的解决方案 - 存储对元素的引用或只是一个整数数组以循环并最终找到。我知道如何做到这一点有很多变化 - 何时/如何存储计数的东西，何时/如何随机化数组或检索随机值（以及如何跟踪已使用的值），在哪里存储所有参考资料，还有更多。我希望这至少有帮助！

于 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 中随机挑选下一个。

// 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 回答