Question

我正在使用寻呼机做一个小旋转木马。旋转木马显示6乘6的元素，我有36个要显示的元素。我有一个下一个和上一个按钮。显示的第一个元素是[0,6]。如果我按下前一个按钮并且没有先前的元素（例如我在第一页），它应该环绕并结束。这同样适用于最后一个元素和下一个按钮。

我的代码如下所示：

$('#img_prev').click(function (e) {
    # change this line so it wraps around
    imgIndex = (imgIndex - 6) % 36;
    alert(imgIndex)
    refreshImages(imgIndex);
    e.preventDefault();
    return false;
});
$('#img_next').click(function (e) {
    imgIndex = (imgIndex + 6) % 36;
    refreshImages(imgIndex);
    e.preventDefault();
    return false;
});

它失败了，因为-6％36是-6而不是30.我可以用if (index < 0) ...来处理它，但我更喜欢具有最佳捕获包裹行为的模数的条件。

我怎样才能将其包裹起来（见第2行）？

Answer 1

一种可能的解决方案是使用this answer：

function mod(x, m) {
    return (x%m + m)%m;
}

$('#img_prev').click(function (e) {
    # this line has been changed, now it wraps around
    imgIndex = mod(imgIndex - 6, 36);
    ...

Answer 2

你可以试试这个：

var maxElements = 36;
$('#img_prev').click(function (e) {
    // change this line so it wraps around
    imgIndex = (maxElements - 1) - (imgIndex % maxElements);
    alert(imgIndex)
    refreshImages(imgIndex);
    e.preventDefault();
    return false;
});
$('#img_next').click(function (e) {
    imgIndex = (imgIndex % maxElements);
    refreshImages(imgIndex);
    e.preventDefault();
    return false;
});

这是 fiddle ，显示输出：

(imgIndex % maxElements)

和

(maxElements - 1) - (imgIndex % maxElements);

将索引保持在边界内并环绕

2 个答案: