Question

我正在Dreamweaver中创建一个摄影课程应用程序，并希望用户能够点按一个按钮，随机向他们分配应用程序中的众多作业。

所有各种作业都在单独的div中，并带有单独的div id。我已经尝试了各种javascript随机链接生成器，但它们没有链接到div ID ...他们正在寻找整个链接（www.noelchenier.ca/#self）而不是div ID（#self）。

有没有办法做到这一点？

这似乎是这个家伙所要求的，但没有解释在哪里使用它？ How to jump to an anchor / div per random button (jQuery mobile)?

感谢您提供任何可能的帮助 Noel Chenier

Answer 1

由于您尚未发布任何HTML，因此有几种可能性。首先，列出javascript数组中的所有相关ID并随机选择一个：

var items = [
   "id1",
   "id2",
   "id3"
];

var randomItemId = items[Math.floor(Math.random() * items.length)];

然后，使用jQuery访问：

$("#" + randomItemId)

其次，如果所有相关的div都有相同的类名，你可以这样做：

var items = $(".whateverClassName");
var randomItemNum = Math.floor(Math.random() * items.length);
var randomItem = items.eq(randomItemNum);

Answer 2

你似乎在说你有一个很长的页面，里面有很多div，它们都会一次显示出来，你想要一个按钮跳转到这些div中随机的一个。如果是这样的话：

<script>    
$(document).ready(function() {
   $("#getAssignment").click(function() {
      var $divs = $(".assignment");
      if ($divs.length > 0) {
         window.location.href = "#" + $divs[ Math.floor(Math.random() * $divs.length) ].id;
      }
   });
});    
</script>

<input id="getAssignment" type="button" value="Get assignment">

<div id="a1" class="assignment">Assigment 1</div>
<div id="a2" class="assignment">Assigment 2</div>
<div id="a3" class="assignment">Assigment 3</div>
<div id="a4" class="assignment">Assigment 4</div>

本质上，它获取了具有“赋值”类的所有div的列表，然后通过将location.href设置为“＃”加上div id来随机选择一个 - 这意味着哈希的哈希部分url将在地址栏中更改，以便用户可以为该特定作业添加书签。

然而，当用户可以自己浏览列表时，从一堆中选择一个随机分配都显示有点奇怪。通过隐藏所有分配开始，然后每次单击按钮时只显示一个随机分配对我来说更有意义。使用与上面相同的html：

$(document).ready(function() {
   var $assignments = $(".assignment");
   $assignments.hide();
   $("#getAssignment").click(function() {
      $assignments.hide();
      if ($assignments.length > 0)
         $($assignments[Math.floor(Math.random()*$assignments.length)]).show();
   });
});

<强>更新

从您上一条评论中，我想知道您是否尝试为多个元素使用相同的id属性？这不起作用，因为每个id都必须是唯一的。

如果想要让几个带有按钮的容器div在每个容器中随机选择一个div，请尝试在按钮中提供class="getAssignment"而不是id=...，然后代码像这样的东西：

<script>    
$(document).ready(function() {
   $(".getAssignment").click(function() {
      var $divs = $(this).parent().find(".assignment");
      if ($divs.length > 0) {
         window.location.href = "#" + $divs[ Math.floor(Math.random() * $divs.length) ].id;
      }
   });
});    
</script>
<div>
   <input class="getAssignment" type="button" value="Get assignment">
   <div id="a1" class="assignment">Assigment 1</div>
   <div id="a2" class="assignment">Assigment 2</div>
   <div id="a3" class="assignment">Assigment 3</div>
   <div id="a4" class="assignment">Assigment 4</div>
</div>
<div>
   <input class="getAssignment" type="button" value="Get assignment">
   <div id="b1" class="assignment">Assigment 7</div>
   <div id="b2" class="assignment">Assigment 8</div>
   <div id="b3" class="assignment">Assigment 9</div>
   <div id="b4" class="assignment">Assigment 10</div>
</div>

将click处理程序分配给具有“getAssignment”类的所有元素，然后代码$(this).parent().find(".assignment")获取所单击按钮的父div，并在其中找到任何“.assignment”div。

按钮链接到随机div

2 个答案: