jquery - 如何让 jQuery 在页面加载时单击随机的 li 元素?
问题描述
我想在我的列表中随机触发一个 .click 处理程序。
我尝试了以下代码,但它不起作用:
$(document).ready(function(){
$('#sidebar li:nth-child() a').click();
});
也试过:
页面加载时单击触发器 (UL > LI)
使用 jQuery 在页面加载时自动单击按钮元素
<li class="countries" id="2"><img src="{% static "images/england.png" %}" alt="england">Premier League
<ul class="subbar">
<li><a class="team" id="12">FC Liverpool</a></li>
<li><a class="team" id="13">Manchester City</a></li>
<li><a class="team" id="17">Tottenham Hotspur</a></li>
<li><a class="team" id="14">Manchester United</a></li>
<li><a class="team" id="11">Leicester City</a></li>
<li><a class="team" id="6">FC Chelsea</a></li>
<li><a class="team" id="2">FC Arsenal</a></li>
<li><a class="team" id="1">AFC Bournemouth</a></li>
<li><a class="team" id="19">West Ham United</a></li>
<li><a class="team" id="16">FC Southapmton</a></li>
<li><a class="team" id="8">FC Everton</a></li>
<li><a class="team" id="7">Crystal Palace</a></li>
<li><a class="team" id="5">Cardiff City</a></li>
<li><a class="team" id="4">FC Burnley</a></li>
<li><a class="team" id="9">Fulham</a></li>
<li><a class="team" id="3">Brighton & Hove Albion</a></li>
<li><a class="team" id="15">Newcastle United</a></li>
<li><a class="team" id="10">Huddersfield Town</a></li>
<li><a class="team" id="20">Wolverhampton Wand.</a></li>
<li><a class="team" id="18">FC Watford</a></li>
</ul>
</li>
解决方案
在开始之前,我应该说,将数字作为id
属性在 HTML 中是无效的。您可以通过简单地将任何字符放在手边来修复它,例如id="a1"
.
您应该使用Math.random()
根据li
列表中的项目数生成随机值。
您可以通过将该随机值放入nth-child
部件中来创建新的选择器......
(注意,我最初说.click()
应该使用 OP 而不是使用 OP .trigger("click")
。那是错误的,文档清楚地表明这.click()
是有效的,并且只是 . 的快捷方式.trigger("click")
。)
$(function(){
$("a.team").on("click", function(e) {
e.preventDefault();
console.log($(this)[0].id + " - " + $(this)[0].innerHTML);
});
var numLi = $(".subbar li").length;
var rnd = Math.floor(Math.random() * Math.floor(numLi)) + 1;
$(".subbar li:nth-child(" + rnd.toString() + ") a").click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="subbar">
<li><a class="team" id="12">FC Liverpool</a></li>
<li><a class="team" id="13">Manchester City</a></li>
<li><a class="team" id="17">Tottenham Hotspur</a></li>
<li><a class="team" id="14">Manchester United</a></li>
<li><a class="team" id="11">Leicester City</a></li>
<li><a class="team" id="6">FC Chelsea</a></li>
<li><a class="team" id="2">FC Arsenal</a></li>
<li><a class="team" id="1">AFC Bournemouth</a></li>
<li><a class="team" id="19">West Ham United</a></li>
<li><a class="team" id="16">FC Southapmton</a></li>
<li><a class="team" id="8">FC Everton</a></li>
<li><a class="team" id="7">Crystal Palace</a></li>
<li><a class="team" id="5">Cardiff City</a></li>
<li><a class="team" id="4">FC Burnley</a></li>
<li><a class="team" id="9">Fulham</a></li>
<li><a class="team" id="3">Brighton & Hove Albion</a></li>
<li><a class="team" id="15">Newcastle United</a></li>
<li><a class="team" id="10">Huddersfield Town</a></li>
<li><a class="team" id="20">Wolverhampton Wand.</a></li>
<li><a class="team" id="18">FC Watford</a></li>
</ul>
推荐阅读
- javascript - 在控制台上工作时不显示 INNERHTML
- r - 使用 lapply 时如何删除第一个空白页?
- python - 将 multidict 转换为具有重复键值作为列表的 dict
- node.js - 节点 - 从响应中读取所有块给出错误
- javascript - 如何在 Flow 严格模式下编写与数据类型无关的事件总线?
- python-3.x - 如何在 django 中的 socialAuth 之后将访问令牌返回到前端
- python - 如何在 Python 中对两个 bin 使用 pandas 切割值计数?
- python - 如何重写此 pd.cut 调用以使用 df.loc 并避免 SettingWithCopyWarning?
- android - 在 Flutter 中使用 FutureBuilder 和 TabBarView
- node.js - Node.js 文档和`@types/node` 之间似乎有区别?