861模板网站 > 网页特效 > 其它特效 > 使用jQuery制作选择分组班级名字点名器

使用jQuery制作选择分组班级名字点名器

班会、课堂互动中，随机点名是一种常见的活动形式。如果手动点名容易出现重复或者遗漏的情况，那么使用一个随机点名器就可以很好地解决这个问题。在本文中，我们将使用jQuery制作一个选择分组班级名字点名器。

开始前准备

需要确保您已经在页面中引入了jQuery库文件。我们需要设置一个列表来存储班级名字信息，并且按照不同的分组进行分类。例如，以下是一个包含三个小组的班级名字列表：

var classList = {
  'Group A': ['Alice', 'Bob', 'Charlie'],
  'Group B': ['David', 'Emma', 'Frank'],
  'Group C': ['Grace', 'Henry', 'Ivy']
};

制作随机点名器

在页面中添加一个“开始”按钮，并设置其点击事件为从班级名字列表中随机选择一个名字。代码如下：

<button id="start-btn">开始</button>

$('#start-btn').click(function() {
  // 随机选择一个小组
  var groups = Object.keys(classList);
  var selectedGroup = groups[Math.floor(Math.random() * groups.length)];
  
  // 在选中的小组中随机选择一个人
  var names = classList[selectedGroup];
  var selectedName = names[Math.floor(Math.random() * names.length)];
  
  // 在页面上显示所选中的名字
  $('#result').text('中奖名字：' + selectedName);
});

在这段代码中，我们从班级名字列表中随机选择一个小组，在该小组中随机选择一个人。我们将所选中的名字显示在页面上。

分组选择

为了让点名的过程更加有趣和多样化，我们还可以添加一个分组选择的功能。通过点击不同的按钮，可以在不同的小组中进行点名。

<button class="group-btn" data-group="Group A">A组</button>
<button class="group-btn" data-group="Group B">B组</button>
<button class="group-btn" data-group="Group C">C组</button>

$('.group-btn').click(function() {
  var selectedGroup = $(this).data('group');
  var names = classList[selectedGroup];
  var selectedName = names[Math.floor(Math.random() * names.length)];
  $('#result').text('中奖名字：' + selectedName);
});

在这段代码中，我们为每个分组设置了一个按钮，并将其data属性设置为对应的小组名称。当点击按钮时，通过获取按钮的data属性值来确定选择的小组并进行点名。