0

我有一个锚标签列表，每个标签都是一个 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 功能完美运行

编辑：添加了其余的代码，但是它使用了很多加载的外部文件，但是它们可以工作，我只是无法到达在第一次单击方法中添加的下一个或上一个锚点

4

2 回答 2

0

In last two functions current is undefined.

于 2013-04-10T08:14:19.680 回答
0

我不认为 split() 是必要的，因为返回的 ID 无论如何都应该是一个字符串。我会使用：

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

而且我不知道这是如何工作的，但我认为在声明它时将 current 设置为默认值是值得的？（如果由于任何原因最后 2 个 click 函数在第一个 click 函数之前被调用？）

于 2013-04-10T09:34:22.077 回答