Question

我为测试创建了一个导航脚本，它使用了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

有人可以告诉我为什么会这样，以及如何解决它。谢谢。

Answer 1

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

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

您计算的next / prev 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')));
});

javascript slice在相同的结构化数组上执行不同的操作

1 个答案: