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>

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

Answer 1

您遇到了麻烦，因为您的“无论”链接正在改变您的prev（）函数期望与其混淆的状态。

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

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

这是一种很好的代码编写方式，就是创建一组特殊的接口函数，确保状态是一致的（下面通过单个函数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或目标，只需执行：

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

编辑：删除了（Math）{...}语句，它允许你使用像abs（）这样的数学函数而不需要详细调用Math.abs（）

通过onclick传递变量

1 个答案: