如何更容易地使用随机 href 设置锚点

所以，在我的项目中，我有一个索引和一个目录，其中包含一堆编号页面（pages/001.html，pages/002.hmtl，pages/003.html...），我想设置一个<a>，每次重新加载索引/单击锚点时，都会将他的href更改为任何此页面。

我可以创建一个数组来编写每个 url 并使用 .random（）来生成链接，但问题是，我有很多编号页面（目前有 30 个），我假装最终会创建更多页面，所以我想知道是否有更简单、更快的方法来做到这一点。

代码应如下所示：

$('random_button').on('click', function(){
  $('random_button').attr("href", Any page inside the directory pages/ chosen randomly)
})

知道吗？谢谢！

如果你的 html 文件名中有类似的模式，比如 001.html、002.html，那么你可以做这样的事情

var openLink = document.getElementById('open');
var randomLink = document.getElementById('random');
/*
assuming there are 40 pages, and page name have patterns like 001.html, 002.html
*/
var pageArray = range(40).map(function(page){
	if(page < 10) return '00' + page + '.html';
	return '0' + page +'.html';
});
/* 
this function will return a array of n elements 
*/
function range(n){
  return Array.from({length: n}, function(value, key){ return key;})
}
function getRandomPage(pageArray){
	return pageArray[Math.floor(Math.random()*pageArray.length)]
}
openLink.addEventListener('click', function(e){
	e.preventDefault();
  	console.log(getRandomPage(pageArray));
	randomLink.href = getRandomPage(pageArray);	
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<a href="#" id="open">Open Random</a>
<a href="#" id="random">Random Link</a>	
</body>
</html>

如果您有不同类型的文件名，那么这将不起作用，@Jozef Cipa 提供的 php 解决方案会更好

这很容易。检查您的selector。您要么缺少.，要么缺少#。

$(function () {
  $("button").click(function () {
    var el = $("ul li a").eq(Math.floor(Math.random() * $("ul li a").length));
    $("#randomLink").attr("href", el.attr("href")).html(el.html());
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<h3>List of Links to Choose From</h3>
<ul>
  <li><a href="//example.com/link1">Link 1</a></li>
  <li><a href="//example.com/link2">Link 2</a></li>
  <li><a href="//example.com/link3">Link 3</a></li>
  <li><a href="//example.com/link4">Link 4</a></li>
  <li><a href="//example.com/link5">Link 5</a></li>
  <li><a href="//example.com/link6">Link 6</a></li>
  <li><a href="//example.com/link7">Link 7</a></li>
  <li><a href="//example.com/link8">Link 8</a></li>
  <li><a href="//example.com/link9">Link 9</a></li>
  <li><a href="//example.com/link10">Link 10</a></li>
  <li><a href="//example.com/link11">Link 11</a></li>
  <li><a href="//example.com/link12">Link 12</a></li>
  <li><a href="//example.com/link13">Link 13</a></li>
  <li><a href="//example.com/link14">Link 14</a></li>
  <li><a href="//example.com/link15">Link 15</a></li>
</ul>
<h3>The random link!</h3>
<button type="button">Generate Random Link</button><br />
<a href="" id="randomLink"></a>

在PHP中，你可以做一些类似的东西

$files = glob('your_dir/*.html');
//now you have array of your html files

现在只需将其发送到您的Javascript中即可。

相关内容

最新更新

热门标签：