javascript - 使用 onclick 传递变量

Question

我的页面上有一本书由 3 个 iframe 组成，1 个 iframe 打开目录，2 个 iframe 同时打开 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>

问题从这里开始，如果我点击 next-previous 按钮，我希望它从第 36,37 页继续，但是它从函数中的 pNum 继续会发生什么，如何从 onclick 更新 pNum ？或者另一种解决方案!

Answer 1

您遇到麻烦是因为您的“无论什么”链接正在改变您的 prev() 函数期望不会被弄乱的状态。

当一个人有某种状态时(例如，一些变量代表一本书的页面)，重要的是不要违反表示不变量或内部表示。因此

Everything that touches the book should keep its internal state consistent.

编写这种情况的一种好方法是创建一组特殊的接口(interface)函数，以确保状态一致(在下面通过单个函数 gotoPage 进行演示，该函数确保一切都保持整洁；可以使用更多不是一个单一的功能，但他们每个人都需要保持整洁)。

首先必须为内部状态提出您想要的规则。在下面的示例中，规则是“rightPage 始终等于 leftPage+1，并且 iframe 始终显示 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 或 target，而是这样做:

<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>

编辑:删除了 with(Math){...} 语句，它允许您使用像 abs() 这样的数学函数，而无需冗长地调用 Math.abs()