[英]Inconsistent Javascript behaviour (IF statement nested in while loop)
我正在尝试编写一个简单的Javascript(jQuery)function,它随机显示可能的11个Div中的6个。代码排序工作,它确实随机显示大约一半的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 之间的任意数量的球。概率偏向中心,但你没有得到 6 个,而正好是 6 个每一次。
您想要的是删除任意选择的六个,确切地说是六个球。
尝试更多类似的东西:
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 的代码可能是选择了一个已经显示的。 如果这有意义吗? 尝试更改您的选择器.....
$('.offer').not('.offershow').each(........
请记住,addClass 不会删除现有的类,因此即使您添加了 offershow class,您的原始选择器仍然会被证明是正确的。
您实际上并没有检查所选 div 是否已显示。 意味着当您遍历所有 div 时,总是有可能将 div 设置为可见两次。 脚本现在认为它是一个新脚本并设置更改 += 1;
尝试添加如下内容:
if(!$(this).hasClass('offershow')) {
[[rest of code here]]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.