上用onclick

Question

我有一本书我的网页上包括3个I帧传递变量，1个IFRAME打开的内容和2个I帧表在同一时间打开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继续发生了什么，如何更新来自onclick的pNum？或者可能是另一个解

Answer 1

你所遇到的麻烦，因为你的“无所谓”链接正在改变，你的上一个（）函数期待不-搅乱与状态。

当一个人具有某种状态（例如表示一本书的网页的一些变量），它不违反表示不变或内部表示是很重要的。因此，

所有触及本书的内容应保持其内部状态一致。

一个好办法代码，这样是这种情况是创建一批特殊的接口函数，确保状态是一致的（通过一个单一的功能GotoPage记述这让每件事情都保持整洁下面演示;一个可以使用多个功能，但他们每个人都需要保持整洁）。

首先人们必须拿出你想要的内部状态的规则。在下面的例子中，规则是“rightPage总是等于leftPage + 1，I帧始终显示leftPage.jpg和rightPage.jpg，除非它是一个无效的页面，在这种情况下该iframe显示了一个关于：空白”。

试试这个：

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> 

编辑：用（数学）{...}语句，它允许你使用数学功能，如ABS（）不verbos删除伊利调用Math.abs（）