Question

我正在寻找一种从六十六中选择一个div的方法，并且需要改变它的CSS背景。它也需要每秒发生一次，所以每秒都会从其他div中选择一个新的div。

我对每一部分感到困惑，这是我所拥有的（不是自制）的一部分：jsFiddle

我的HTML代码：

<div id="content">
    <h1>Random plaatjes</h1>
        <div class="pics">
            <div class="heading">
                <div class="cell" id="cell">
                Plaatjes 1
                </div>
                <div class="cell" id="cell">
                Plaatjes 2
                </div>
                <div class="cell" id="cell">
                Plaatjes 3
                </div>
                <div class="cell" id="cell">
                Plaatjes 4
                </div>
            </div>
            <div class="row">
                <div class="cell" id="cell">
                Plaatje 1
                </div>
                <div class="cell" id="cell">
                Plaatje 2
                </div>
                <div class="cell" id="cell">
                Plaatje 3
                </div>
                <div class="cell" id="cell">
                Plaatje 4
                </div>
            </div>
            <div class="row">
                <div class="cell" id="cell">
                Plaatje 1
                </div>
                <div class="cell" id="cell">
                Plaatje 2
                </div>
                <div class="cell" id="cell">
                Plaatje 3
                </div>
                <div class="cell" id="cell">
                Plaatje 4
                </div>
            </div>
            <div class="row">
                <div class="cell" id="cell">
                Plaatje 1
                </div>
                <div class="cell" id="cell">
                Plaatje 2
                </div>
                <div class="cell" id="cell">
                Plaatje 3
                </div>
                <div class="cell" id="cell">
                Plaatje 4
                </div>
            </div>
            <div class="row">
                <div class="cell" id="cell">
                Plaatje 1
                </div>
                <div class="cell" id="cell">
                Plaatje 2
                </div>
                <div class="cell" id="cell">
                Plaatje 3
                </div>
                <div class="cell" id="cell">
                Plaatje 4
                </div>
            </div>
        </div>
</div>

以我的方式，我想要一个随机id =＆＃34; cell＆＃34;每秒选择一个红色边框或其他东西。如果你们这些人帮助我以正确的方式帮助我，我将非常感激！谢谢你的帮助，抱歉我的英语不好（不是我的母语）。

Answer 1

首先，id属性唯一，这意味着您可能没有多个具有相同ID的元素。

为了实现您的需求，您可以Math.random()与window.setInterval()合并：

// Timed interval which occurs every 1000 milliseconds
window.setInterval(function() {

    var $cells = $('.cell'), // Get all elements with a class of "cell"
        cellCount = $cells.length, // Determine how many elements there are
        random,
        selected;

   // Generate a random number between 0 and the number of elements
   random = Math.floor(Math.random() * cellCount);

   // Get our randomly selected element
   selected = $cells[random];

}, 1000);

JSFiddle demo

Answer 2

首先，正如评论中的其他人所述，重复的id属性无效，因此您需要从HTML中删除id="cell"。

其次，您可以通过获取页面中.cell元素的数量，然后选择介于0和0之间的随机数来实现此目的。然后，您可以通过eq()方法获取所选元素。最后，您可以使用setInterval()函数每秒运行代码。试试这个：

function highlight() {
    var $divs = $('.cell').removeClass('highlight');
    var random = Math.floor(Math.random() * $divs.length);
    $divs.eq(random).addClass('highlight');
}
highlight(); // run on load
setInterval(highlight, 1000); // then every 1 second afterward

Example fiddle

Answer 3

首先，确保在加载页面时选择一个随机单元格（我在这个例子中添加了一个“活动”类 - 可能是其他的东西）：

var allCells = $('.cell');  
var index = Math.floor(Math.random() * allCells.length);
allCells.eq(index).addClass('active');

然后，每隔一秒，首先从活动的单元格中删除活动类，然后将其添加到另一个随机单元格中：

window.setInterval(function(){

    $('.cell.active').removeClass('active');

    var allCells = $('.cell');  
    var index = Math.floor(Math.random() * allCells.length);
    allCells.eq(index).addClass('active');

}, 1000);

这是一个小提琴：http://jsfiddle.net/Niffler/fx0m7e3a/

Jquery每秒选择随机单元格

3 个答案: