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 > 

希望這會有所幫助。