Pass variable mit onclick

Auftritt sorgen, weil Ihr "was auch immer" link verändert sich der Zustand, dass Ihre prev () - Funktion erwartet wird, werden nicht-versaut-mit.

Wenn man irgendeine Art von Zustand (z.B. einige Variablen repräsentieren ein Buch mit Seiten), ist es wichtig, nicht gegen die Darstellung der Invarianten oder interne Darstellung. So

Alles, was Sie berührt das Buch sollte, um seinen internen Zustand konsistent.

Ein guter Weg, um code so, dass dies der Fall ist, erstellen Sie eine Reihe von speziellen Schnittstellen-Funktionen, die sicherstellen, dass der Zustand konsistent ist (unten gezeigt über eine einzige Funktion gotoPage was macht Sie sicher, alles ist sauber, man konnte mehr als eine einzelne Funktion, sondern Sie würden jedes Bedürfnis, Dinge sauber zu halten).

Erste zu kommen mit den Regeln, die Sie wollen für den internen Zustand. In dem Beispiel unten, die Regel ist "rechterseite ist immer gleich linkerseite+1, und die iframes zeigen immer leftPage.jpg und rightPage.jpg außer wenn es eine ungültige Seite in dem Fall, dass der iframe zeigt eine about:blank".

Versuchen Sie dies:

function $id(id) {
    return document.getElementById(id);
}

/*
    internal representation
    these values changed only by the gotoPage function
    invariant:
        - rightPage is always equal to leftPage+1
        - iframes always show leftPage.jpg and rightPage.jpg, 
          except if it's an invalid page, in which case that 
          iframe shows an about:blank
*/
var leftPage = 0; //page0 is blank
var rightPage = 1; //must always be equal to leftPage+1; which may be an invalid page
var PAGE_MAX = ???;
function gotoPage(num) {
    if (num<0)
        num = 0;
    if (num>PAGE_MAX)
        num = PAGE_MAX; //may need to think about this some more

    //most books seem to put even pages on left and odd on right
    function isEven(n) {
        return n%2==0; //sidenote: abs(n%2)==1 -> odd
    }
    leftPage = isEven(num) ? num : num-1;
    rightPage = leftPage+1;

    updateDisplay();
}

function prev() {
    gotoPage(leftPage-2);
}
function next() {
    gotoPage(leftPage+2);
}
function gotoPageByGuess(elem) {
    var pageNum = parseInt(elem.innerHTML.slice(-2));
    gotoPage(pageNum);
}

function updateDisplay() {
    //using jquery
    $id('leftPage').src = 'page'+leftPage+'.jpg';
    if (rightPage <= PAGE_MAX)
        $id('rightPage').src = 'page'+rightPage+'.jpg';
    else
        $id('rightPage').src = 'about:blank';            
}

Dann verwenden Sie nicht eine regelmäßige href oder Ziel, sondern nur:

<a onclick="prev()">Previous</a>
<a onclick="next()">Next</a>

Dann können Sie tun, entweder von diesen, je nachdem, welche ist am einfachsten:

<a onclick="gotoPage(26)">Chapter 2: Some Title......... p26</a>
<a onclick="gotoPageByGuess(this)">Chapter 2: Some Title......... p26</a>

edit: entfernt(Math) {...} - Anweisung, die Sie verwenden mathematische Funktionen wie abs (), ohne wortreich Aufruf von Math.abs()