我正在尝试创建一次显示4张卡片的抽认卡。卡中装有对象数组。一个按钮显示接下来的四张卡，另一个按钮显示最后的四张卡。当前，显示最后四张卡的按钮需要按下两次才能起作用。一旦用户想要再次前进，他们需要再次按下按钮两次。我不确定为什么会这样。
这是我的代码：
var cardWords = [{
word: 'one 1',
deck: 1
},
{
word: 'two 1',
deck: 1
},
{
word: 'three 1',
deck: 1
},
{
word: 'four 1',
deck: 1
},
{
word: 'one 2',
deck: 2
},
{
word: 'two 2',
deck: 2
},
{
word: 'three 2',
deck: 2
},
{
word: 'four 2',
deck: 2
},
{
word: 'one 3',
deck: 3
},
{
word: 'two 3',
deck: 3
},
{
word: 'three 3',
deck: 3
},
{
word: 'four 3',
deck: 3
},
{
word: 'one 4',
deck: 4
},
{
word: 'two 4',
deck: 4
},
{
word: 'three 4',
deck: 4
},
{
word: 'four 4',
deck: 4
}
];
var i = 0;
// REVIEW: : On first click, show first four, on second click show second four, etc.
function nextGroup() {
console.log(i);
if (i == cardWords.length) { //Before displaying cards, reset i if i == cardWords.length; If i == cardWords.length, we're at the end
i = 0;
console.log(i, "reset")
}
document.getElementById('showWord').innerHTML = cardWords[i].word; //First card of deck
document.getElementById('showWord1').innerHTML = cardWords[i + 1].word; //Second card of deck
document.getElementById('showWord2').innerHTML = cardWords[i + 2].word; //Third card of deck
document.getElementById('showWord3').innerHTML = cardWords[i + 3].word; //Fourth card of deck
if (i < cardWords.length) { //Place after displaying to not skip first four
i = i + 4; //Add by 4 to get index of first card in next deck
console.log(i);
}
}
function lastGroup() {
console.log(i);
if (i != 0) { //Place after displaying to not skip first four
i = i - 4; //Decrease by 4 to get index of first card in previous deck
console.log(i);
}
document.getElementById('showWord').innerHTML = cardWords[i].word; //First card of deck
document.getElementById('showWord1').innerHTML = cardWords[i + 1].word; //Second card of deck
document.getElementById('showWord2').innerHTML = cardWords[i + 2].word; //Third card of deck
document.getElementById('showWord3').innerHTML = cardWords[i + 3].word; //Fourth card of deck
}.card {
height: 100px;
width: 200px;
font-family: arial;
font-size: 30px;
background-color: floralwhite;
padding-top: 50px;
text-align: center;
border-style: solid;
margin-bottom: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 10px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}<!DOCTYPE html>
<html>
<body>
<div>
<div id="showWord" class="card">Learned Words</div>
<input type="button" value="Next Group" onclick="nextGroup()">
<input type="button" value="Last Group" onclick="lastGroup()">
</div>
<div id="showWord1" class="card">Words</div>
<div id="showWord2" class="card">Words</div>
<div id="showWord3" class="card">Words</div>
</body>
</html>
答案 0 :(得分：0)
增加和减少应该在您按下按钮时发生，而不是前一次按下的副作用。当溢出超过最大值时，我在这里使用模运算符来处理环绕到零，反之亦然。这有点“可爱”，但足够普遍。在这种情况下，可能是除以卡总数除以索引的余数。
i = ( i + 4 ) % cardWords.length;
将当前索引增加4，然后确保该数字在可用卡的范围内。
i = ( i - 4 + cardWords.length ) % cardWords.length;
将当前索引降低4，通过添加卡总数来确保它保持正数，然后确保该数目在可用卡范围内。
var cardWords = [{
word: 'one 1',
deck: 1
},
{
word: 'two 1',
deck: 1
},
{
word: 'three 1',
deck: 1
},
{
word: 'four 1',
deck: 1
},
{
word: 'one 2',
deck: 2
},
{
word: 'two 2',
deck: 2
},
{
word: 'three 2',
deck: 2
},
{
word: 'four 2',
deck: 2
},
{
word: 'one 3',
deck: 3
},
{
word: 'two 3',
deck: 3
},
{
word: 'three 3',
deck: 3
},
{
word: 'four 3',
deck: 3
},
{
word: 'one 4',
deck: 4
},
{
word: 'two 4',
deck: 4
},
{
word: 'three 4',
deck: 4
},
{
word: 'four 4',
deck: 4
}
];
var i = 0;
var firstTurn = true;
// REVIEW: : On first click, show first four, on second click show second four, etc.
function nextGroup() {
i = (i + 4) % cardWords.length;
if (firstTurn) {
i = 0;
firstTurn = false;
}
console.log(i);
document.getElementById('showWord').innerHTML = cardWords[i].word; //First card of deck
document.getElementById('showWord1').innerHTML = cardWords[i + 1].word; //Second card of deck
document.getElementById('showWord2').innerHTML = cardWords[i + 2].word; //Third card of deck
document.getElementById('showWord3').innerHTML = cardWords[i + 3].word; //Fourth card of deck
}
function lastGroup() {
i = (i - 4 + cardWords.length) % cardWords.length;
console.log(i);
document.getElementById('showWord').innerHTML = cardWords[i].word; //First card of deck
document.getElementById('showWord1').innerHTML = cardWords[i + 1].word; //Second card of deck
document.getElementById('showWord2').innerHTML = cardWords[i + 2].word; //Third card of deck
document.getElementById('showWord3').innerHTML = cardWords[i + 3].word; //Fourth card of deck
}.card {
height: 100px;
width: 200px;
font-family: arial;
font-size: 30px;
background-color: floralwhite;
padding-top: 50px;
text-align: center;
border-style: solid;
margin-bottom: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 10px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}<!DOCTYPE html>
<html>
<body>
<div>
<div id="showWord" class="card">Learned Words</div>
<input type="button" value="Next Group" onclick="nextGroup()">
<input type="button" value="Last Group" onclick="lastGroup()">
</div>
<div id="showWord1" class="card">Words</div>
<div id="showWord2" class="card">Words</div>
<div id="showWord3" class="card">Words</div>
</body>
</html>