Question

我有一个锚标记列表，每个锚标记都包含一个div中的内容，然后我就有了可以在加载的内容中来回切换的控件。但我不能让它解雇下一个或上一个兄弟的click（）：

            var current;
            var request = new XMLHttpRequest();
            request.open("GET", "EPUBS/" + localStorage.book, false);
            if(request.overrideMimeType){
                request.overrideMimeType('text/plain; charset=x-user-defined');
            }
            request.send();
            var file = request.responseText;
            var zip =  new JSZip(file);
            var $content = $(zip.file(localStorage.selected + "/toc.ncx").asText()).find("navPoint");
            $content.each(function(){
                $('#navbar').append("<a href = '#' id = '" + $(this).children('content').attr('src') + "' > " + $(this).children('navLabel').children('text').text() + "</a><br/>");
            });

$("#navbar > a").click(function(event) {   
    event.preventDefault();
    var t2 = ($(this).attr('id')).split("#");
    var $tr = $(zip.file("6130/" + t2[0]).asText());
    document.getElementById('main').innerHTML = "";
    $('#main').append('<h1>' + $(this).text() + '</h1>');
    document.getElementById('main').innerHTML += $tr.text();
    current = t2;    
});

$("#prev").click(function(event) {    
    event.preventDefault();
    $('#' + current).prev().click();    
});

$("#next").click(function(event) {    
    event.preventDefault();
    $('#' + current).next().click();    
});

        <div id = 'navbar'>
    </div>

    <div id = 'main'>
        <h1 id = 'mHeading'>Book</h1>
        <img src = 'book.png' width = '500px'/>
        <p id = "d"></p>
    </div>

    <div id = 'controls'>
        <table>
            <tr>
                <td width = "12%"><a href = "#"  id = "c1" onclick = "document.getElementById('main').style.color = 'black'; document.getElementById('main').style.backgroundColor = 'white';">black on white</a></td>
                <td width = "12%"><a href = "#"  id = "c2" onclick = "document.getElementById('main').style.color = 'white'; document.getElementById('main').style.backgroundColor = 'black';">white on black</a></td>
                <td width = "10%"></td>
                <td><a href = "#"  id = "prev" ><</a></td>
                <td><a href = "#"  id = "next" >></a></td>
                <td width = "5%"><a href = "#" id = "s1" style = "font-size: 12px" onclick = "document.getElementById('main').style.fontSize = '14px'">A</a></td>
                <td width = "5%"><a href = "#" id = "s1" style = "font-size: 16px"  onclick = "document.getElementById('main').style.fontSize = '16px'">A</a></td>
                <td width = "5%"><a href = "#" id = "s1" style = "font-size: 20px"  onclick = "document.getElementById('main').style.fontSize = '20px'">A</a></td>
            </tr>
        </table>
    </div>

我写错了吗？第一个.click功能完美运行

编辑：添加了剩下的代码，但它使用了很多加载的外部文件，然而它们正常工作，我只是无法进入第一次单击方法中添加的下一个或上一个锚

Answer 1

最后两个函数 current 未定义。

Answer 2

我不认为split（）是必要的，因为返回的ID应该是一个String。我会用：

current = $(this).attr('id');

并且我不知道它是如何工作的，但是我认为在你声明时将值设置为默认值是值得的吗？（如果出于任何原因，最后一个点击功能在第一个之前被调用？）

下次点击的锚点列表不起作用

2 个答案: