Question

我想使用java脚本在客户端动态创建面包屑。面包屑将是用户后面的路径，导航为： 主页＆gt;关于我们＆gt;我们的历史......

将在用户导航的序列中的每个页面上生成锚标记。

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

我心中的一些逻辑是：

在java脚本中使用名称创建对象类型变量 和值对，其中名称是当前页面的名称值是该页面的网址。

现在传递此对象在从一个页面导航到的时候使用查询字符串变量其他

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

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

现在在下一页执行相同的并创建锚点。

使用html5客户端存储的here类似于：的 HTML：

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

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>

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

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

提前感谢。

Answer 1

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

尝试这样的事情并将其放在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

$(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>";
        }
    }
}

这只会在第一个页面之后将链接放在页面上。所以，你也可以使用

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

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

最后，这不会阻止碎屑中的重复，因此您可能需要考虑存储链接＆amp;数组中的文本并从中构建碎屑。

Answer 2

就像@Luke所说的那样，您没有添加任何链接来导航面包屑。您必须像这样存储文本和链接：

function getbyID(Id) {
$.ajax({
    type: "GET",
    url: "/NewOrder/GetOrderByID/" + Id,
    contentType: "application/json;charset=UTF-8",
    dataType: "json",
    success: function (result) {
        GetItems();
        var rows = '';
        $.each(result, function (key, item) {
            rows += '<tr id="trr">';
            rows += '<td>' + item.code + '</td>';
            rows += '<td> <select name="Items" class="ItemsIDMDL form-control" id="ItemsMDL' + item.ID + 'ID"></select></td>';
           // $('#ItemsMDL' + item.ID + 'ID').find(item.ItemName).val();
            console.log("select")
            console.log("#ItemsIDMDL" + item.ID);
            $("#select_id").val("val2").change();
            rows += '<td> <select name="Sizes" class="form-control"></select></td>';
            rows += '<td>' + item.Quantity + '</td>';
            rows += '<td>' + item.Price + '</td>';
            rows += '<td>' + item.Total + '</td>';
            rows += '</tr>';
            
        });
        $('.orderdetailsmodel').html(rows);
        //$('#ItemsIDMDL'+ item.ItemName).val(item.ItemName).change();
        $.each(result, function (key, item) {
            console.log("item")
            $('#ItemsMDL' + item.ID + 'ID').find(item.ItemName).val();
            console.log("#ItemsIDMDL" + item.ItemName);
        });

        $('#myModal').modal('show');
       
        $('#btnUpdate').show();
        $('#btnAdd').hide();
        //$.each(result, function (key, item) {

        //$('#id').val(result.ID);
        //$('#ClientNamePU').val(result.RealName);
        //$('#RegionPU').val(result.Region);
        //$('#GovernoratePU').val(result.GovernorateName);
        //$('#CallStatuPUID').val(result.CallStatuName).change();
        //code = OD.item.code,
        //              ItemName = OD.item.ItemName,
        //              size = OD.size.SizeName,
        //              Quantity = OD.Quantity,
        //              Price = OD.Price,
        //              Total = OD.Total
        //})
    },
    error:
        function (errormessage) {
            alert(errormessage.responseText);
        }
});

您只需将文本和链接都添加到一个存储变量中，然后用定界符将其拆分以提取它！

从页面function breadcrumbStateSaver(link, text) { if (typeof (Storage) != "undefined") { if (sessionStorage.breadcrumb) { sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + text; sessionStorage.locations = sessionStorage.locations + ";" + link; //use any delim you prefer } else { sessionStorage.breadcrumb = text; sessionStorage.locations = link; } }加载页面时，实际上可以获取链接，而不是单击即可捕获链接，并且文本可以从document.location.href或将在服务器中设置的某些属性中获取。所以在document.ready

document.title

要更新$(document).ready(function(){ breadcrumbStateSaver(document.title, document.location.href); showBreadCrumb(); });中的面包屑：

<ul>

这样，它将在用户每次浏览您的网站时进行记录。如果您希望用户浏览面包屑，请通过单击面包屑返回到他们所在的页面，将上面的代码更改为以下代码：

function showBreadCrumb(){
    let crumbs = sessionStorage.breadcrumb.split(";");
    let links = sessionStorage.locations.split(";");
    for(let index in crumbs)
        $("#navigation_links").append($("<li><a href="+links[index]+">"+ crumbs[index] +"</a></li>"));
}

还添加：

function showBreadCrumb(){
    let crumbs = sessionStorage.breadcrumb.split(";");
    let links = sessionStorage.locations.split(";");
    let crumbindex = parseInt(sessionStorage.crumbindex);
    for(let index in crumbs){
        $("#navigation_links").append($("<li><a class='crumb"+ (index==crumbindex ? "active" : "") + "' href='"+links[index]+"' data-node='"+index+"'>"+ crumbs[index] +"</a></li>")); //data-node will help in retrieving the index and class will be set to active for selected node
    }
}

使用节点索引，您可以像这样插入面包屑：

$(document).ready(function(){
    $('#navigation_links').on('click', 'li a.crumb', function(){
        if (typeof (Storage) != "undefined") {
            sessionStorage.crumbindex = $(this).data('node');
            sessionStorage.navlinkclicked = "true"; //This will prevent from adding breadcrumb again
        }
    });
    breadcrumbStateSaver(document.title, document.location.href);
    showBreadCrumb();
});

如果只希望导航面包屑，而不是记录用户的遍历，则可以使用function breadcrumbStateSaver(link, text) { if (typeof (Storage) != "undefined") { if (sessionStorage.breadcrumb) { if (sessionStorage.navlinkclicked && sessionStorage.navlinkclicked=="true") { sessionStorage.navlinkclicked = "false"; //prevent changes or you can remove the rest of the crumbs from sessionStorage.breadcrumb and locations using a for loop } else { if(sessionStorage.crumbindex && sessionStorage.crumbindex!=-1) { let crumbs = sessionStorage.breadcrumb.split(";"); let links = sessionStorage.locations.split(";"); let crumbindex = parseInt(sessionStorage.crumbindex); sessionStorage.breadcrumb = crumbs[0]; sessionStorage.locations= links[0]; for(let index in crumbs){ if(index==0) continue; sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + crumbs[index]; sessionStorage.locations= sessionStorage.locations + ";" + links[index]; if(index==crumbindex) break; } sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + text; sessionStorage.locations = sessionStorage.locations + ";" + link; //insert the new link after crumbindex location sessionStorage.crumbindex = -1; } else{ sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + text; sessionStorage.locations = sessionStorage.locations + ";" + link; //keep appending } } } else { sessionStorage.breadcrumb = text; sessionStorage.locations = link; } }拆分URL路径。假定您的页面与索引页面存储在适当的层次结构中，那么您要做的就是拆分URL路径并相应地更新showBreadCrumb（）。您不需要使用会话存储！

window.location.pathname

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

2 个答案: