jquery - 随机显示(洗牌)div

标签 jquery html css

我有一组这样的 div:

example

我需要在点击其中一个红色 div 时随机播放它们,但点击的 div 应该始终与黄色 div 交换。

fiddle here

$('.box-red').click(function() {
    var container = $('#container');
    var nodes = container.children();
    for (var i = 1; i < nodes.length; i++) {
        container.append(nodes.eq(Math.floor(Math.random() * nodes.length)));
    }
});

谢谢

最佳答案

我对这个 FIDDLE 采取了稍微不同的方法

  1. 放入随机颜色
  2. 点击一个框
  3. 记住盒子名称和类别
  4. 再次随机化所有盒子
  5. 将“点击”框更改为不同的类别

我尝试使用 rgb 代码,但没有得到一致的结果,然后在这里,有人更新了 一个古老的答案,并说这种类型的事情最好通过改变类来处理 - Eureka !片刻。似乎工作。我想用 rgb 多玩一些...不是微不足道的。

JS

$('.box').on('click', function(){
    getboxcolor = $(this).hasClass('blue');
    getboxnum = $(this).attr('id');
    newcolors();
    if( getboxcolor )
    {
     $( '#' + getboxnum ).removeClass( 'blue' );
     $( '#' + getboxnum ).addClass( 'green' );
     }
     else
    {
     $( '#' + getboxnum ).removeClass( 'green' );
     $( '#' + getboxnum ).addClass( 'blue' );
     }
     getboxcolor = '';
     getboxnum = 0;
});

关于jquery - 随机显示(洗牌)div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23530931/

相关文章:

jquery - 使用jquery对列表内容进行排序

javascript - jquery ajax返回HTML元素

css - 发布自定义 Bootstrap 菜单

jquery - 通过 SweetAlert 确认删除数据表中的行

javascript - 在客户端禁用 HTML 元素 (javascript)

html - CSS 不显示部分代码

html - CSS 中的页脚问题...需要帮助

javascript - 一旦选择的第一个下拉菜单的值等于 'Courier',就显示第二个下拉菜单

javascript - 将父类添加到样式标签内的 css

javascript - 将 HTML 页面指向登录页面