Передайте переменную с помощью onclick

Question

У меня есть книга на моей странице, состоящая из 3 фреймов, 1 фрейм открывает оглавление и 2 фрейма, чтобы одновременно открывать 2 страницы, а также у меня есть 2 кнопки для навигации по следующим и предыдущим страницам с помощью этой функции

var pNum = 1;
var pNum2 = 2;
var maxPage = 108;
pNum = pNum+2;
pNum2 = pNum2+2;
if (pNum > maxPage) {pNum=1;pNum2=2;}
    document.getElementById("Frame_C").src="page"+pNum+".jpg";
    document.getElementById("Frame_B").src="page"+pNum2+".jpg";
}
function prev(){
    pNum = pNum-2;
    pNum2 = pNum2-2;
    if (pNum < 1) {pNum=107;pNum2=108;}
        document.getElementById("Frame_C").src="page"+pNum+".jpg";
        document.getElementById("Frame_B").src="page"+pNum2+".jpg";
} 

если я нажимаю на ссылку в оглавлении, она открывает 2 страницы с этой ссылкой

<td>
 <p class=Mmenu>
  <a href="page36.jpg" target="Frame_C" onClick="window.open('page37.jpg','Frame_B')">whatever</a>
</td>

проблема начинается здесь, если я нажимаю на следующую-предыдущую кнопку, я хочу продолжитьсо страницы 36,37, но что происходит, если в функции продолжить с pNum, как обновить pNum с помощью onclick?или, может быть, другое решение !!

Answer 1

Вы сталкиваетесь с проблемами, потому что ваша «любая» ссылка меняет состояние, в котором ваша функция prev () ожидает, что она не будет перепутана.

Когда у вас есть какое-то состояние (например, некоторые переменные)представляет книгу со страницами), важно не нарушать инварианты представления или внутреннее представление .Таким образом,

Все, что касается книги, должно сохранять ее внутреннее состояние непротиворечивым.

Хороший способ написания кода, такой, как этот, заключается в создании группы специальных интерфейсовфункции, обеспечивающие согласованность состояния (показано ниже с помощью одной функции gotoPage, которая обеспечивает чистоту всего; можно использовать более одной функции, но каждая из них должна поддерживать порядок).

Сначала нужно придумать правила, которые вы хотите для внутреннего состояния.В приведенном ниже примере правило «rightPage всегда равно leftPage + 1, и iframes всегда показывают leftPage.jpg и rightPage.jpg, за исключением случаев, когда это недопустимая страница, и в этом случае iframe показывает about: blank».

Попробуйте это:

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';            
}

Тогда не используйте обычный href или цель, а просто сделайте:

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

Тогда вы можете сделать любое из них,в зависимости от того, что проще:

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

edit: удалено с помощью оператора (Math) {...}, который позволяет использовать математические функции, такие как abs (), без подробного вызова Math.abs ()