不一致的Javascript行为(IF语句嵌套在while循环中)

时间:2011-06-06 15:45:54

标签: javascript jquery random while-loop

我正在尝试编写一个简单的Javascript(jQuery)函数,该函数随机显示6个Div。可能的11个。代码排序,它会随机显示大约一半的Div,但它之间的变化4和8.

谁能告诉我哪里出错了?它似乎应该如此简单,但我完全迷失了!

我的代码:

<div class="offer">Offer 1</div>
<div class="offer">Offer 2</div>
... snip
<div class="offer">Offer 11</div>

<script src="query.min.js" type="text/javascript"></script>


 <script>
            var changed = 0;

            while (changed < 6) {


                $('.offer').each(function(index) {

                    if (changed < 6) {

                        var showOrNot = Math.floor(Math.random() * 2);

                        if (showOrNot == 1) {

                            $(this).addClass('offershow');
                            changed += 1;
                            $(this).text(changed); //debugging looking for the current value of changed 
                        }


                    }


                })


            }

        </script>

3 个答案:

答案 0 :(得分:6)

现在的问题是你有一堆无关的尝试。如果你有一个有11个球的球并且有50%的机会移除每个球,你可能会在0到11之间得到任意数量的球。概率向中心倾斜,但你没有得到六个而且正好六个每一次。

你想要的是删除六个,正好六个,任意选择的球。

尝试更像这样的事情:

var offers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
for (var i = 0; i < 6; i += 1) {
    // choose a remaining offer at random
    var index = Math.floor(Math.random() * offers.length);

    // retrieve the item being shown
    var item = $('.offer').eq(offers[index]);
    item.addClass('offerShow');

    // remove this offer from the list of possibilities
    offers.splice(index, 1);
}

编辑:在评论中,OP澄清了他真正想要的是采取任意大小的要约列表并显示其中的六个。下面提供的代码解决了这个问题,而不是原始问题中的严格要求。我将离开原始代码以供参考。

var OFFERS_TO_SHOW = 6;  // config, of sorts

// make sure no offers are shown now
$('.offer').removeClass('offerShow');

// show offers selected at random
for (var i = 0; i < OFFERS_TO_SHOW; i += 1) {
    // get a list of offers not already being shown
    var candidates = $('.offer').not('.offerShow');

    // select one from this list at random
    var index = Math.floor(Math.random() * offers.length);

    // show this offer by adding the offerShow class
    candidates.eq(index).addClass('.offerShow');
}

答案 1 :(得分:1)

我认为问题在于你没有排除你已经设置过的div。因此,您选择要显示的下一个div的代码可能是选择已经显示的代码。如果这有道理?尝试更换选择器.....

$('.offer').not('.offershow').each(........

请记住,addClass不会删除现有的类,因此即使您添加了offershow类,原始选择器仍然会被证明是正确的。

答案 2 :(得分:0)

您实际上没有检查选定的div是否已经显示。意味着当你循环遍历所有div时,总是有可能将div设置为两次。该脚本现在认为它是一个新的并且设置已更改+ = 1;

尝试添加以下内容:

if(!$(this).hasClass('offershow')) {
    [[rest of code here]]
}