jQuery 使用javascript在客户端动态创建面包屑

Create breadcrumbs dynamically on client side using javascript

提问by Saurabh Palatkar

I want to create breadcrumbs dynamically on client side using java script. The breadcrumbs will be the path followed by userwhile navigation as: Home > about us > our history..

我想使用 java script 在客户端动态创建面包屑。面包屑将是用户在导航时遵循的路径： 主页>关于我们>我们的历史..

The anchor tags will be generated on each page in the sequence in which the user navigate.

锚标记将按照用户导航的顺序在每个页面上生成。

Now I can create these breadcrumbs using server side technology easily but I want to generate it dynamically on each page on client side. Now I don't know exactly how to implement it.

现在我可以轻松地使用服务器端技术创建这些面包屑，但我想在客户端的每个页面上动态生成它。现在我不知道如何实现它。

Some logic in my mind is as:

我脑子里的一些逻辑是：

1. Create an object type variablein java script with a nameand value pairwhere nameis the name of currentpage and valueis the url of that page.

2. Now pass this object variable using query stringwhile navigating from one page to other.

3. Then in the second page get that object variable from query string and extract the name and value pair from that object and then using that create the anchor and add it to targeted div (place holder).

4. Again when user goes to another page add the name and value pairsfor all the previous pagesalong with the name and value pairfor current page at the last in the object variableand pass it to next page using query string.

5. Now in next page do the sameand create anchors.

1. 使用名称和值对在 java 脚本中创建一个对象类型变量，其中name是当前页面的名称，value是该页面的url。

2. 现在在从一页导航到另一页时使用查询字符串传递此对象变量。

3. 然后在第二页中从查询字符串中获取该对象变量并从该对象中提取名称和值对，然后使用它创建锚点并将其添加到目标 div（占位符）。

4. 再次，当用户转到另一个页面时，将所有先前页面的名称和值对以及对象变量中最后一个当前页面的名称和值对添加到对象变量中，并使用查询字符串将其传递到下一页。

5. 现在在下一页做同样的事情并创建锚点。

Some what similar I got hereusing html5 client side storage as: html:

我在这里使用 html5 客户端存储得到了一些类似的东西： html：

<ul id="navigation_links">
    <li>Page1</li>
    <li>Page2</li>
    <li>Page3</li>
</ul>

js:

js：

$(document).ready(function(){
    bindEventToNavigation();
});

function bindEventToNavigation(){
    $.each($("#navigation_links > li"), function(index, element){
        $(element).click(function(event){
            breadcrumbStateSaver($(event.currentTarget).html());
            showBreadCrumb();
        });
    });
}


function breadcrumbStateSaver(text){
    //here we'll check if the browser has storage capabilities
    if(typeof(Storage) != "undefined"){
        if(sessionStorage.breadcrumb){
            //this is how you retrieve the breadcrumb from the storage
            var breadcrumb = sessionStorage.breadcrumb;
           sessionStorage.breadcrumb = breadcrumb + " >> "+text;
        } else {
           sessionStorage.breadcrumb = ""+text; 
        }
    }
    //if not you can build in a failover with cookies
}

function showBreadCrumb(){
     $("#breadcrumb").html(sessionStorage.breadcrumb);   
}
<div id="breadcrumb"></div>

but here instead of creating hyperlinked anchors it is creating simple text, whereas I want the breadcrumbs to be anchors and hyperlinked to their respective pages.

但这里不是创建超链接的锚点，而是创建简单的文本，而我希望面包屑成为锚点并超链接到它们各自的页面。

I am new to java script and don't know how to implement this. If you have any better logic and solution for this please tell me.

我是 Java 脚本的新手，不知道如何实现。如果您对此有更好的逻辑和解决方案，请告诉我。

thanks in advance.

提前致谢。

回答by Luke

When you are adding the items to the breadcrumb you are not adding them as links, you are just adding text and the click events you had binded to the li elements will not passed along. Finally, you are not giving any sort of href for those breadcrumbs to use.

当您将项目添加到面包屑时，您不会将它们添加为链接，您只是添加文本，并且您绑定到 li 元素的点击事件不会传递。最后，您没有为这些面包屑提供任何类型的 href 以供使用。

Try something like this and put it on 4 pages with those links and the script file on each page

试试这样的东西，把它放在 4 页上，每个页面上都有这些链接和脚本文件

<div id="breadcrumb"></div>
<ul id="navigation_links">
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
    <li><a href="page4.html">Page 4</a></li>
</ul>

JS

JS

$(document).ready(function(){
    bindEventToNavigation();
    showBreadCrumb(); //Show the breadcrumb when you arrive on the new page
});

function bindEventToNavigation(){
    $.each($("#navigation_links > li > a"), function(index, element){
        $(element).click(function(event){
            breadcrumbStateSaver($(this).attr('href'), $(this).text());
            showBreadCrumb();
        });
    });
}

function breadcrumbStateSaver(link, text) {
    if (typeof (Storage) != "undefined") {
        if (sessionStorage.breadcrumb) {
            var breadcrumb = sessionStorage.breadcrumb;
            sessionStorage.breadcrumb = breadcrumb + " >> <a href='" + link + "'>" + text + "</a>";
        } else {
            sessionStorage.breadcrumb = "<a href='" + link + "'>" + text + "</a>";
        }
    }
}

This is only going to put links on pages after the first one. So alternatively you can use

这只会在第一个页面之后放置链接。所以或者你可以使用

$(document).ready(function () {
    breadcrumbStateSaver(document.title, document.location.href);
    showBreadCrumb();
});

at the top of each page and automatically add it to the breadcrumb instead of doing it on the click. If you need the clicks to run some other function/event you can use span/li/div tags with an id that you can bind an event to instead of just using anchors.

在每个页面的顶部，并自动将其添加到面包屑中，而不是在点击时添加。如果您需要点击来运行其他一些函数/事件，您可以使用带有 id 的 span/li/div 标签，您可以将事件绑定到该标签，而不仅仅是使用锚点。

Finally, this will not stop there from being duplicates in the crumb, so you may want to consider storing the links & text in an array and build the crumbs from that.

最后，这不会阻止面包屑中的重复，因此您可能需要考虑将链接和文本存储在数组中并从中构建面包屑。