0

我为一个使用 XML 行 ID 的测验制作了一个导航脚本。我正在定义一个带有循环的数组并将 i++ 值推入其中以保存所有行 ID。通过思考，我想，如果通过修改测验缺少 id 怎么办。因此，我制作了一个脚本，通过行 ID 定义数组。这会导致相同的数组，因为还没有缺少 id。但是，当我浏览测验时，它会以不同的方式对数组进行切片，或者至少会产生不同的结果。

xml文件结构：

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <row id="1">
    <question img="images/vuilnisman.png" mp3="audio/WatDoetDeVuilnisman.mp3" ogg="audio/WatDoetDeVuilnisman.ogg">Wat doet de vuilnisman?</question>
    <answer mp3="audio/HijTiltDeVuilnisbakInDeVuilnisauto.mp3" ogg="audio/HijTiltDeVuilnisbakInDeVuilnisauto.ogg">Hij tilt de vuilnisbak in de vuilnisauto.</answer>
  </row>
  <row id="2">
    <question img="images/tandarts.png" mp3="audio/WatZegtDeTandartsVaak.mp3" ogg="audio/WatZegtDeTandartsVaak.ogg">Wat zegt de tandarts vaak?</question>
    <answer mp3="audio/UMagNuSpoelen.mp3" ogg="audio/UMagNuSpoelen.ogg">U mag nu spoelen.</answer>
  </row>
  <row id="3">
    <question img="images/zanger.png" mp3="audio/WatMaaktEenZangerGoed.mp3" ogg="audio/WatMaaktEenZangerGoed.ogg">Wat maakt een zanger goed?</question>
    <answer mp3="audio/AlsHijGevoelKanLatenHoren.mp3" ogg="audio/AlsHijGevoelKanLatenHoren.ogg">Als hij gevoel kan laten horen.</answer>
  </row>
  <row id="4">
    <question img="images/schoonmaakster.png" mp3="audio/WatIsEenGoeieSchoonmaakster.mp3" ogg="audio/WatIsEenGoeieSchoonmaakster.ogg">Wat is een goede schoonmaakster?</question>
    <answer mp3="audio/IemandDieGrondigSchoonmaakt.mp3" ogg="audio/IemandDieGrondigSchoonmaakt.ogg">Iemand die grondig schoonmaakt.</answer>
  </row>
  <row id="5">
    <question img="images/cassiere.png" mp3="audio/WaarMoetEenCassiereGoedOpLetten.mp3" ogg="audio/WaarMoetEenCassiereGoedOpLetten.ogg">Waar moet een cassière goed op letten?</question>
    <answer mp3="audio/DatZeVoldoendeGeldTeruggeeft.mp3" ogg="audio/DatZeVoldoendeGeldTeruggeeft.ogg">Dat ze voldoende geld terug geeft.</answer>
  </row>
</root>

我总共有 39 行。

循环定义数组 allRowIds：

    rows.each(function() {  
        i++;
        allRowIds.push(i);
        //allRowIds.push($(this).attr('id'));
    });

当我使用 i++ 作为值时，导航效果很好，而当我使用行 ID 值时，导航效果不佳。

获取第一行ID的函数： 

function firstRowIds(allIds, maxRows) { //params array rowIds, int maxRows
    var rowIds = allIds;
    if(rowIds.length>maxRows) {
        rowIds = allIds.slice(0, maxRows);
    }
    return rowIds;
}

获取下一行ID的函数：

function nextRowIds(allIds, currentIds, maxRows) {
    var start = currentIds[maxRows-1],
        end = start + maxRows,
        nextIds = [];
    return nextIds = allIds.slice(start, end);
}

获取前一行ID的函数：

function prevRowIds(allIds, currentIds, maxRows) {
    var end = currentIds[0]-1,
        start = end - maxRows,
        prevIds =[];
        return prevIds = allIds.slice(start, end);
}

使用行 ID 值定义 allRowIds 数组时的一些 chrome 控制台数据：

At start:
allRowIds array 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39

currentIds array at start, retrieved whit the firstRowIds function
1,2,3,4,5,6,7,8,9,10
this are 10 ids becuase maxRows is set to 10.

When clicked on next:

currentIds 
11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39
This is so wrong it should be 11 - 20.

nextIds array 21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39
this is incorrect too this should be 21 - 30

数组由 i++ 值定义时的 chrome 控制台数据：

At start:
allRowIds array 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39

currentIds array at start, retrieved whit the firstRowIds function
currentIds 1,2,3,4,5,6,7,8,9,10 
this are 10 ids becuase maxRows is set to 10.

When clicked on next:
currentIds 11,12,13,14,15,16,17,18,19,20
This is correct

nextIds array 21,22,23,24,25,26,27,28,29,30
this is also correct

有人可以告诉我为什么会发生这种情况以及如何解决它。谢谢。

4

1 回答 1

2

几乎所有属性的值都是字符串。

因此，当您从“id”属性填充您的 ids 列表时，您的列表包含字符串“1”、“2”等。

您计算的下一个/上一个 id（切片函数的结束参数）是错误的。

function nextRowIds(allIds, currentIds, maxRows) {
    var start = currentIds[maxRows-1],
        end = start + maxRows,
        nextIds = [];
    return nextIds = allIds.slice(start, end);
}

在此代码中，您的结尾不是 10、20 等，而是“91”、“191”等。

您可以更改代码以解析属性中的值，如下所示：

rows.each(function() {  
    allRowIds.push(+($(this).attr('id')));
});
于 2013-06-10T11:07:28.540 回答