javascript - 按钮链接到随机 div

Question

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

所有不同的作业都在单独的 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)?

感谢您提供任何可能的帮助 诺埃尔·谢尼尔

Answer 1

您似乎是在说，您有一个很长的页面，其中同时显示了很多 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 来随机选择一个要移动到的位置 - 这意味着网址的哈希部分将在地址栏中发生变化，以便用户可以为该特定作业添加书签。

但是，当用户可以自己浏览列表时，从所有显示的一堆中选择一个随机分配似乎有点奇怪。对我来说，从隐藏所有作业开始，然后每次单击按钮时只显示一个随机作业会更有意义。使用与上面相同的 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>

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