现有元素列表上的随机更改类答案

【问题标题】：random change class on existing list of element现有元素列表上的随机更改类
【发布时间】：2020-10-10 00:54:18
【问题描述】：

流程应该是：我控制存在多少元素；我创建了一个由这些数字组成的唯一随机数组；我使用随机序列每 5 秒给相应的元素一个类。但它不起作用。我做错了什么？

html

<div class="wrapper-sx">
    <h4>...</h4>
    <h4>...</h4>
</div>

jquery

var items = $("#working .wrapper-sx").find("h4");
var number = items.length;
var arr = [];
while(arr.length < number){
    var r = Math.floor(Math.random() * number) + 1;
    if(arr.indexOf(r) === -1) arr.push(r);
};
console.log(arr);
for (i = 0; i < number; i++) {
    setInterval(function () {
        items.removeClass("active");
        items.eq(arr[i]).addClass("active");
        console.log(i);
    }, 5000);
};

非常感谢你

【问题讨论】：

标签： jquery random

【解决方案1】：

那是因为你的 parent-div 选择器是错误的。您没有任何 ID 为 #working 的元素。另外，如果你想要某种动画，我建议将setInterval() 放在循环之外。

var items = $(".wrapper-sx").find("h4");
var number = items.length;
//console.log(number);

setInterval(function () {
let r =  Math.floor(Math.random() * number); //note that now for each iteration I am forming a new randowm number
console.log(r+1);
for (i = 0; i < number; i++) {
        $(items[i]).removeClass("active");
        if(i === r){
          $(items[i]).addClass("active");
        }
        //console.log(i);
   
}
 }, 5000);

.active{
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-sx">
    <h4>1</h4>
    <h4>2</h4>
    <h4>3</h4>
    <h4>4</h4>
    <h4>5</h4>
    <h4>6</h4>
    <h4>7</h4>
    <h4>8</h4>
    <h4>9</h4>
    <h4>10</h4>
</div>

我添加了一些用于视觉表示的 css

【讨论】：

我什么都不懂。为什么 doble '$(items[i]).removeClass("active");' ?无论如何，又出问题了，“活动”类仅在一个 h4 上停止。我想每 5 秒向一个不同的 h4 添加课程。您的方式每次都将课程应用于相同的 h4。
$(items[i]).removeClass("active"); 是一个拼写错误。所以你想要一个 h4 一次拥有 active 类？
已编辑，如有遗漏请告知
是的，我希望每 5 秒一个 h4 有 active 类。
试试sn-p，看看是不是你需要的

【解决方案2】：

我想我解决了这个问题：

    var items = $(".wrapper-sx").find("h4");
    var item_number = items.length;
    var arr = [];
    while(arr.length < item_number){
        var r = Math.floor(Math.random() * item_number);
        if(arr.indexOf(r) === -1) arr.push(r);
    };
    var indexElement = 0;
    setInterval(function () {
        if(indexElement<item_number){
            items.removeClass("active");
            items.eq(arr[indexElement]).addClass("active");
            indexElement++;
        } else{
            indexElement = 0;
        }
     }, 5000);

谢谢大家 ;)

【讨论】：