jQuery - 小屏幕导航。 Next和prev按钮href基于当前窗口url?
问题描述:
我有侧边栏消失的iPad屏幕和更小的被替换下一个和以前的箭头。jQuery - 小屏幕导航。 Next和prev按钮href基于当前窗口url?
基本上,我想取当前页面的URL,将它从域中分离出来,并将其与侧栏中的定位标记进行比较。一旦找到正确的页面,在侧边栏中的“当前页面”标签之前用锚标签的href填充“上一个”图标href,并用后面的锚标签的href填充“下一个”图标href。
sidebar.html(只是几行,但真正的侧边栏很多更长)-
<nav class="main-nav">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="{% url 'index:pg_1' %}" id="sub_1" ><h5>
{{title_1}}<span class=></span></h5></a>
</li>
<li>
<a href="{% url 'index:pg_2' %}" id="sub_1" ><h5>
{{title_2}}<span class=></span></h5></a>
</li>
<li>
<a href="{% url 'index:pg_3' %}" id="sub_1"><h5>
{{title_3}}<span class=></span></h5></a>
</li>
<li>
<a href="{% url 'index:pg_4' %}" id="sub_1"><h5>
{{title_4}}<span class=></span></h5></a>
</li>
图标 -
<i class="fa fa-angle-left fa-5x prev" aria-hidden="true">
<a class="left" href="#"></a>
</i>
<i class="fa fa-angle-right fa-5x next" aria-hidden="true">
<a href="#" class="right"></a>
</i>
的jQuery -
$(function(){
console.log("nav for sm screens is ready");
// var url;
var x;
var url;
var page_url = window.location.pathname;
page_url.split('/');
console.log(page_url);
url = $("a#sub_1").attr("href"); // Gets all 'a' tags with id of 'sub_1' (all of them)
console.log("we have urls ");
for (x in url){ // loops through them
if (page_url == url){ // matches page url with a url in sidebar
console.log("we have a url that is the same as the page url")
console.log(url)
if ($(this).closest("li a").prev().length) { // code usually breaks down here, checking if an anchor tag exists before current selection or not
console.log("there are no links before this")
$(".prev").hide(); // if no anchor tag exists before this tag, hide previous.
console.log("left is hidden");
$(".right").prop("href", $(this).next("a").prop("href")); // set 'next' to href of next anchor tag.
console.log("we have next link");
};
};
};
});
我试过使用closest()
,parent()
,parents()
和一些其他变化,但似乎没有任何工作。
答
这是非常模糊的,很难找出一个例子。以下是我想出了:
https://jsfiddle.net/Twisty/Lrzo071q/8/
HTML
<nav class="main-nav">
<i class="fa fa-angle-left fa-5x prev" aria-hidden="true"></i>
<ul class="nav nav-pills nav-stacked">
<li><a href="./page-1/" id="sub-1" class="sub-link"><h5>1<span class=""></span></h5></a></li>
<li><a href="./page-2/" id="sub-2" class="sub-link"><h5>2<span class=""></span></h5></a></li>
<li><a href="./page-3/" id="sub-3" class="sub-link"><h5>3<span class=""></span></h5></a></li>
<li><a href="./_display/" id="sub-4" class="sub-link"><h5>4<span class=""></span></h5></a></li>
</ul>
<i class="fa fa-angle-right fa-5x next" aria-hidden="true"></i>
</nav>
的JavaScript
$(function() {
console.log("Small Screen Navigation Setup");
var page_url = window.location.pathname,
urlParts = page_url.split('/');
console.log("URL:", page_url, "URL Parts:", urlParts);
$(".sub-link").each(function(k, el) {
var href = $(el).attr("href");
console.log("Compare:", href, "to: ./" + urlParts[1] + "/");
if (href == "./" + urlParts[1] + "/") {
console.log("Target URL found in Window URL");
console.log("Current URL:", href);
if ($(el).parent().is("li:last")) {
console.log("Hidding Next.");
$(".next").hide();
}
if ($(el).parent().is("li:first")) {
console.log("Hidding Prev.");
$(".prev").hide();
}
} else {
console.log("Target URL not found.");
}
});
});
控制台
Small Screen Navigation Setup
URL: /_display/ URL Parts: Array [ "", "_display", "" ]
Target URLs collected: Array [ "./page-1/", "./page-2/", "./page-3/", "./_display/" ]
Compare: ./page-1/ to: ./_display/
Target URL not found.
Compare: ./page-2/ to: ./_display/
Target URL not found.
Compare: ./page-3/ to: ./_display/
Target URL not found.
Compare: ./_display/ to: ./_display/
Target URL found in Window URL
Current URL: ./_display/
Hidding Next.
这当然会在您的网站上有所不同。如果你包含了一些输出样本,这个例子可能更具体。基本上,我们想比较href
中的值与当前的url。使用.each()
我们可以迭代每个<a>
,然后比较href
属性的值与我们从window.location.pathname
收集的特定字符串。
一旦我们找到了匹配,我们想要测试它是否是:first
或:last
元素。我们可以通过.is()
进行测试。由于我们遍历了<a>
元素,并且我们需要测试<li>
项目,所以我们需要使用.parent()
来查看我们的元素父元素。
你会看到输出如下:
< 1 2 3 4
这个例子中的第二个测试将是移动./_display/
到其它链接:
<ul class="nav nav-pills nav-stacked">
<li><a href="./_display/" id="sub-1" class="sub-link"><h5>1<span class=""></span></h5></a></li>
<li><a href="./page-2/" id="sub-2" class="sub-link"><h5>2<span class=""></span></h5></a></li>
<li><a href="./page-3/" id="sub-3" class="sub-link"><h5>3<span class=""></span></h5></a></li>
<li><a href="./page-4/" id="sub-4" class="sub-link"><h5>4<span class=""></span></h5></a></li>
</ul>
这将有输出,如:
1 2 3 4 >
希望这会有所帮助。
你在控制台中看到了什么?你不需要'var parts = page_url.split('/');'来捕获结果数组? – Twisty
'id'属性应该是唯一的。因此,对所有人使用'sub_1'会导致问题。会建议使用'class':'',and'',然后使用'$(”。sub-link“)'选择器。 – Twisty
@Twisty在控制台中,它不会越过检查当前锚点之前是否存在锚点的线路。它一直运行一次或两次,但无论如何都不起作用。 – arm93