Надо сделать чтобы не повторялся класс больше одного раза. Присвоить только одному элементу. Как можно реализовать?

Рейтинг: 0Ответов: 1Опубликовано: 21.05.2023

jQuery(function ($) {
    var classes = [
    "color1",
    "color2",
    "color3",
    "color4",
    "color5",
    "color6",
    "color7",
    "color8",
    "color9",
    "color10",
    "color11",
    "color12",
    "color13",
    "color14",
    "color15",
    "color16",
    "color17"
    ];
    var $div = $(".cat-item");

    $div.each(function (index) {
        $(this).removeClass(classes.join(" "));
        $(this).addClass(classes[Math.floor(Math.random() * classes.length)]);
    });
});
.df{
display: flex;
}
.cat-item {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    padding: 0 12px;
    height: 40px;
    border-radius: 10px;
    color: #000;
}
.color1 {
    background: #d56060;
}

.color2 {
    background: #7569cf;
}

.color3 {
    background: #3dbbc6;
}

.color4 {
    background: #a0bf36;
}

.color5 {
    background: #d9a05d;
}

.color6 {
    background: #877d7d;
}

.color7 {
    background: #cb5cb2;
}

.color8 {
    background: #78c764;
}

.color9 {
    background: #63a1d5;

}

.color10 {
    background: #7460c7;
}

.color11 {
    background: #5c7acb;
}

.color12 {
    background: #c1a352;
}

.color13 {
    background: #e84854;

}

.color14 {
    background: #47acd1;
}

.color15 {
    background: #4da3aa;
}

.color16 {
    background: #937253;
}

.color17 {
    background: #5dc131;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="swiper-wrapper categories df">
                            <li class="swiper-slide ag-slide_item " data-swiper-autoplay="false" data-swiper-slide-index="0">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-roadster-fill"></i>
                                    <p class="cat-title">Avtomobil</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="1">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-home-2-fill"></i>
                                    <p class="cat-title">Uy-joy</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="2">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-roadster-fill"></i>
                                    <p class="cat-title">Tehnika</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="3">
                                <div class="cat-item cat-item-random-color">
                                    <i class="fas fa-mobile"></i>
                                    <p class="cat-title">Telefon</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="4">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-t-shirt-2-fill"></i>
                                    <p class="cat-title">Kiyimlar</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="ag-slide_item swiper-slide swiper-slide-prev" data-swiper-autoplay="1500" data-swiper-slide-index="5">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-restaurant-fill"></i>
                                    <p class="cat-title">Oziq-ovqat</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="ag-slide_item swiper-slide swiper-slide-active" data-swiper-autoplay="1500" data-swiper-slide-index="6">
                                <div class="cat-item cat-item-random-color">
                                    <i class="fas fa-paint-roller"></i>
                                    <p class="cat-title">Qurilish</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="ag-slide_item swiper-slide swiper-slide-next" data-swiper-autoplay="1500" data-swiper-slide-index="7">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-football-line"></i>
                                    <p class="cat-title">Sport</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="8">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-roadster-fill"></i>
                                    <p class="cat-title">Uy jihozlari</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="9">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-roadster-fill"></i>
                                    <p class="cat-title">Ustalar</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="10">
                                <div class="cat-item cat-item-random-color">
                                    <i class="fas fa-baby-carriage"></i>
                                    <p class="cat-title">Bolalar uchun</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="11">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-hand-heart-fill"></i>
                                    <p class="cat-title">Hadya qilish</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="12">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-riding-line"></i>
                                    <p class="cat-title">Velosiped</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="13">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-suitcase-fill"></i>
                                    <p class="cat-title">Tayyor biznes</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="14">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-roadster-fill"></i>
                                    <p class="cat-title">Taqinchoq</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="15">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-roadster-fill"></i>
                                    <p class="cat-title">Asbob va uskuna</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="16">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-roadster-fill"></i>
                                    <p class="cat-title">Boshqalar</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>
                            <li class="swiper-slide ag-slide_item" data-swiper-autoplay="1500" data-swiper-slide-index="17">
                                <div class="cat-item cat-item-random-color">
                                    <i class="ri-gamepad-fill"></i>
                                    <p class="cat-title">O'yinlar</p>
                                </div>
                                <a href="" class="overlay-cat-items"></a>
                            </li>

                        </ul>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0

Принцип простой: Надо изначально массив "взболтать", чтобы значения не были по порядку, а дальше уже из этого перемешанного массива в цикле доставать значения по очереди...

Алгоритмов перемешивания очень много. Например можно так:

let arr = [1,2,3,4,5,6,7]

function* shuffle(arr) {
  arr = [...arr];
  while(arr.length) yield arr.splice(Math.random()*arr.length|0, 1)[0]
}

console.log([...shuffle(arr)])

или так

let arr = [1,2,3,4,5,6,7]

let shuffled = arr.reduce(([a,b])=>
  (b.push(...a.splice(Math.random()*a.length|0, 1)), [a,b]),[[...arr],[]])[1]

console.log(shuffled)

или самому реализовать по любому из десятка существующих алгоритмов