Question

我有许多代码生成的html页面，这些页面至少分为一个或多个类别。用户可以导航到这些类别，然后导航到文档。

现在，我想支持一个前进和后退按钮，该按钮应根据先前选择的类别将用户引导至以下或先前的文档：

<div data-role="controlgroup" data-mini="true" data-type="horizontal" data-inline="true" class="ui-btn-right">
    <a id="btnPrev" href="#" data-role="button" data-iconpos="notext" data-theme="c" data-icon="arrow-l"></a>
    <a id="btnNext" href="#" data-role="button" data-iconpos="notext" data-theme="c" data-icon="arrow-r"></a>
</div>

我的解决方案是在每个文档中包含一个脚本，以修改这些按钮的href。所选类别作为url参数给出。

<script>
$(document).live("pageshow", function() {
    var nav = {"All":["Page1.htm","Page2.htm"],"Category1":["Page2.htm","Page3.htm"]};
    var cat = (document.URL.match(/\bcat=[^&#?=]*/)[0] || 'cat=All').slice(4);
    $("#btnPrev").attr("href", nav[cat][0] + "?cat=" + cat);
    $("#btnNext").attr("href", nav[cat][1] + "?cat=" + cat);
});
</script>

它适用于第一页，但问题是jquery似乎保留了旧元素，从而导致按钮id多次出现。这样，我无法选择当前按钮，甚至脚本也不会更新（导航对象的值与将其打印到控制台时的值相同）

我想到的最简单的解决方案是 1.1。使用存储新导航数据的div容器：

<div data-role="content" id="divNav" style="diyplay:none">{"All":["Page1.htm","Page2.htm"],"Category1":["Page2.htm","Page3.htm"]}</div>

2.1。如果页面不是第一次加载，请删除现有元素：

<script>
first = true;
$(document).live("pageshow", function() {
    console.log("first: " + first)
    if(!first) {
        $("#divNav").remove();
        $("#btnPrev").remove();
        $("#btnNext").remove();
    } else first = false;

    var cat = (document.URL.match(/\\bcat=[^&#?=]*/)[0] || 'cat=All').slice(4);
    var nav = JSON.parse($("#divNav").text())[cat];
    $("#btnPrev").attr("href", nav[0] + "?cat=" + cat);
    $("#btnNext").attr("href",  nav[1] + "?cat=" + cat);
});
</script>

但是由于某种原因，删除操作导致我第二次切换页面时出错，所以我去了

2.2。如果出现多次，请删除元素：

<script>
$(document).live("pageshow", function() {
    function check(n) {
        if($("[id=" + n + "]").length > 1)
            $("#" + n).remove();
    }
    check("divNav");
    check("btnPrev");
    check("btnNext");

    var cat = (document.URL.match(/\\bcat=[^&#?=]*/)[0] || 'cat=All').slice(4);
    var nav = JSON.parse($("#divNav").text())[cat];
    $("#btnPrev").attr("href", nav[0] + "?cat=" + cat);
    $("#btnNext").attr("href",  nav[1] + "?cat=" + cat);

});
</script>

此解决方案效果很好（除了在导航回到所示的第一个文档后重新加载页面-但这不是太重要），但是我发现它很难看。我是否可以采取任何措施迫使jquery不保留某些元素？无论如何为什么要这样做呢？有没有更清洁，更美观的解决方案？

预先感谢

Edit1：这是您可以使用的片段。只需创建2个或更多文件doc {n} .htm替换其中的数字即可。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page 1</title> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
    <script src="https://raw.githubusercontent.com/davidcalhoun/energize.js/master/energize-min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 

<body> 
    <script>
    console.log("init 1");
    $(document).live("pageshow", function() {
        console.log("show 1");

        var dflt = { "next": "doc2.htm" };
        var txt = "elements with id 'btn': " + $("[id=btn]").length + 
            `;  next doc is '${dflt.next}'`;

        console.log(txt);
        $("#p1").text(txt);
        $("#btn").attr("href", dflt.next);
    });
    </script>


<div data-role="page">

    <div data-role="header">
        <h1>My Title 1</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Hello world</p>      
        <a id="btn" href="#" data-role="button">doc2</a>
        <p id="p1"></p>     
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

jQuery保留元素以防止元素访问当前文档

0 个答案: