Question

所以，在我的项目中，我有一个索引和一个带有一堆编号页面的目录（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)

})

有什么想法吗？谢谢！

Answer 1

如果您的html文件名中有类似的模式，例如001.html，002.html，那么您可以这样做

＆＃13;

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);	
})

＆＃13;

<!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>

＆＃13;

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

Answer 2

这很容易。检查您的selector。您错过了.或#。

＆＃13;

$(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());
  });
});

＆＃13;

<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>

＆＃13;

Answer 3

在PHP中，您可以制作类似

的内容

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

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

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

3 个答案: