Непоследовательное поведение Javascript (оператор IF вложен в цикл while)

Question

Я пытаюсь написать простую функцию Javascript (jQuery), которая случайным образом отображает 6 делений из возможных 11. Код вроде работает, он случайным образом отображает около половины делений, но между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>

Answer 1

Проблема сейчас в том, что у вас есть куча не связанных попыток. Если у вас есть ведро с 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);
}

РЕДАКТИРОВАТЬ : В комментариях ОП пояснил, что он действительно хочет взять список предложений произвольного размера и показать шесть из них. Приведенный ниже код отвечает на запросы, а не на строгий запрос в исходном вопросе. Я оставляю исходный код для справки.

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

Answer 2

Думаю, проблема в том, что вы не исключаете div, который вы уже выставили для показа.Таким образом, возможно, что ваш код для выбора следующего div для показа - это тот, который уже был показан.Если это имеет смысл?Попытка изменить ваш селектор .....

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

Имейте в виду, что addClass не удаляет существующие классы, поэтому ваш оригинальный селектор все равно подтвердится, даже если вы добавили класс offerhow.

Answer 3

Вы на самом деле не проверяете, отображается ли выбранный div или нет. Значит, когда вы просматриваете все div, всегда есть возможность установить div, видимый дважды. Теперь скрипт думает, что он новый, и наборы изменились + = 1;

Попробуйте добавить что-то вроде этого:

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