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

Inconsistent Javascript behaviour (IF statement nested in while loop)

本文关键字：循环 IF 语句 while Javascript 行为 嵌套 不一致      更新时间：2023-09-26

我正在尝试编写一个简单的Javascript（jQuery）函数，该函数可以随机显示可能的11个div中的6个div。代码是可行的，它确实随机显示了大约一半的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>

目前的问题是，您有很多不相关的尝试。如果你有一个有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');
}

我认为问题在于您没有排除已经设置为显示的div。因此，选择下一个要显示的div的代码可能是选择一个已经显示的div。这有道理吗？正在尝试更改选择器。。。。。

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

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

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

试着添加这样的东西：

if(!$(this).hasClass('offershow')) {
    [[rest of code here]]
}
相关文章：