js如何选择部分的选择器在href使上一个和下一个按钮?

Question

<li><a href="/chapter-1.html">Ch. 1 - TitleHere</a></li>
<li><a href="/chapter-2.html">Ch. 2 - TitleHere</a></li>
<li><a href="/chapter-3.html">Ch. 3 - TitleHere</a></li>
<li><a href="/chapter-4.html">Ch. 4 - TitleHere</a></li>
<li><a href="/chapter-5.html">Ch. 5 - TitleHere</a></li>

这些是我网站上静态页面的几个链接。他们的href后面有数字

现在，我想使下一个和上一个按钮(通过加/减href内的数字1)。但是我很困惑，使一个选择器到href内的数字。

但是，现在让它成为一个警报功能。

<button type="button" onclick="getURL();">Get Page URL</button>

<script>
var current = window.location.pathname;
function getURL() {
alert(current + 1);
}
</script>

Answer 1

您在正确的行中获取当前url。

一旦你有了这个字符串，你就可以在chapter- string处拆分它。这会给你一个包含两个字符串的数组。第一项包含完整的url，直到并包括章节前面的/字符——第二项包含数字，后面跟着.html。因此，您可以通过从该项目中删除。html来找到编号。

当用户单击Next按钮时创建URL，获取数字，如果它小于5，则添加1，然后通过将章节- +新的n + .html放在一起来创建(相对)URL。然后为这个URL做一个窗口定位。

Previous按钮基本相同，只是测试的是数字大于1并减去1。

<button type="button" onclick="previous();">Previous</button>
<button type="button" onclick="next();">Next</button>

<script>
const current = window.location.pathname;
const twoParts = current.split('chapter-');
var number = twoParts[1].replace('.html', '');
function next() {
if (number < 5) { alert(number); gotoChapter(++number); };
}
function previous() {
if (number > 1) { gotoChapter(--number); }
}
function gotoChapter(n) {
window.location = 'chapter-' + n + '.html';
}
</script>

你也可以使用JS创建previous和next按钮，所以如果number为5就不创建next，如果number为0也不创建previous。

Answer 2

可以使用数据集属性，只需将每个页面添加到HTML中作为数据集，然后引用数据集获取页面事件被点击，然后用a标签附加到current变量数据集被点击的值。

const $li = $('li a')
$li.each(function(index, a){
const current = window.location.pathname;
function getURL(event) {
event.preventDefault();
alert(current + a.dataset.page);   
}  
a.addEventListener('click', getURL);  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a data-page="1" href="/chapter-1.html">Ch. 1 - TitleHere</a></li>
<li><a data-page="2" href="/chapter-2.html">Ch. 2 - TitleHere</a></li>
<li><a data-page="3" href="/chapter-3.html">Ch. 3 - TitleHere</a></li>
<li><a data-page="4" href="/chapter-4.html">Ch. 4 - TitleHere</a></li>
<li><a data-page="5" href="/chapter-5.html">Ch. 5 - TitleHere</a></li>

Answer 3

通常在服务器端使用page id方法完成，但这也可以通过使用您的方法完成:

<button onclick="getURL()" ></button>
<script>
//get the page number from "/chapter-ThisIsYourPageNumber.html" , its between "-" and "."
var current = window.location.pathname;
var start = current.indexOf("-") + 1; //+1 get start index of page number
var end = current.indexOf(".");
var length = end - start;
var pageNumber = current.substr(start, length);
var nextPageNumber = parseInt(pageNumber) + 1;
function getURL() {
alert("/chapter-"+nextPageNumber+".html");
}
</script>