4

我正在尝试获取一些带有 id 的 div 来随机化它们出现的顺序。我找到了一个据说可以做到这一点的脚本，但是对于我的生活，我无法弄清楚为什么我的不工作.

基本上，当页面加载时，HTML 将如下所示：

<div class="main">
   <div id="box">1</div>
   <div id="box">2</div>
   <div id="box">3</div>
   <div id="box">4</div>
</div>

但是应用时的代码将随机化它们出现的顺序（在浏览器中），如下所示：

<div class="main">
   <div id="box">3</div>
   <div id="box">1</div>
   <div id="box">4</div>
   <div id="box">2</div>
</div>

这是据说可以使它全部工作的javascript：

 function reorder() {
           var grp = $(".main").children();
           var cnt = grp.length;

           var temp,x;
           for (var i = 0; i < cnt; i++) {
               temp = grp[i];
             x = Math.floor(Math.random() * cnt);
             grp[i] = grp[x];
             grp[x] = temp;
         }
         $(grp).remove();
         $(".main").append($(grp));
       }

我以为是因为我有一个 id 属性，但即使我把它去掉并使它成为一个普通的旧 div 标签，它也不起作用：/

这是有问题的代码的 js fiddle 之类的... js fiddle

这里有几个类似的问题，但都是老话题，所以我希望没有人介意我提出一个新的问题。我对javascript还是很陌生，如果这还不是很明显：D

4

2 回答 2

5

只是改变

<div class=".main">
   <div id="#box">1</div>
   <div id="#box">2</div>
   <div id="#box">3</div>
   <div id="#box">4</div>
</div>

到

<div class="main">
   <div >1</div>
   <div >2</div>
   <div >3</div>
   <div >4</div>
</div>

两个错误：

  • 这".main"应该是你寻找的“主要” $(".main").children()。
  • "#box"您用于多个元素的 id

在您的小提琴中，您还忘记了导入 jQuery。

演示（点击“用JS运行”）

于 2013-04-17T19:11:48.597 回答
1

首先，如前所述，ID 应该是唯一的，并且它们不以 # 开头。ids 的选择器使用#。

类也一样，它们应该以字母开头，只有选择器使用点。

现在为你的小提琴。你在这里明显使用了 jQuery，所以在你的小提琴中包含 jQuery，在左侧的菜单中。

然后，您在小提琴中所做的是定义一个函数，但您从不调用它。只需在代码末尾添加对函数的调用（jsFiddle 在加载文档时调用，如下所示：

reorder();

在你的小提琴上为我工作。

于 2013-04-17T19:18:11.987 回答