jQuery - 小屏幕导航。 Next和prev按钮href基于当前窗口url？

Question

我有侧边栏消失的iPad屏幕和更小的被替换下一个和以前的箭头。

基本上，我想取当前页面的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()和一些其他变化，但似乎没有任何工作。

Answer 1

这是非常模糊的，很难找出一个例子。以下是我想出了：

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 > 

希望这会有所帮助。