Question

我有一个对象数组，其中包含链接，图像标记和标题的值。

var array = [
{ 'link': 'link0', 'src': 'page-0.jpg', 'title': 'Title 0' },
{ 'link': 'link1', 'src': 'page-1.jpg', 'title': 'Title 1' },
{ 'link': 'link2', 'src': 'page-2.jpg', 'title': 'Title 2' },
{ 'link': 'link3', 'src': 'page-3.jpg', 'title': 'Title 3' },
{ 'link': 'link4', 'src': 'page-4.jpg', 'title': 'Title 4' }
];

我的页面有三张图片，每张图片都有以下标题：

[Title 4], [Title 0], [Title 1]

最后一个数组项将位于第一个插槽中，插槽2中的第一个数组项和第三个插槽中的第二个项

当用户点击左箭头或右箭头时，我需要在数组中来回循环，更改页面上的三个插槽，如下所示：

[4], [0], [1] (Start view)
[0], [1], [2]
[1], [2], [3]
[2], [3], [4]
[3], [4], [0]
[4], [0], [1] (End view)

任何人都知道如何做到这一点？谢谢，

Answer 1

让我们分解要求！

每次用户单击按钮时，您都需要递增或递减引用该数组的值。这些值需要存储在某个地方 - 如果您愿意，可以使用三个变量（全局）。对于此演示，我将它们分配给“状态”对象：

var state = {
    start_a: 4,
    start_b: 0,
    start_c: 1
}

下一部分是增加/减少我们的值的逻辑。我的代码没有什么特别的，可能会被清理（或优化），但这就是我写的：

function click(dir) {
    var key;

    // Loop the state object to get appropriate values
    for (key in state) {

        // Based on direction, we need to update values that are 0 or 4 (first/last)
        // so not to break inner/outer bound
        if (dir === -1) {
            if (state[key] === 0) {
                state[key] = 4;
            } else {
                state[key] += dir;
            }
        } else {
            if (state[key] === 4) {
                state[key] = 0;
            } else {
                state[key] += dir;
            }
        }
    }

    // Return state object
    return state;
}

最后，我们需要向方向传递递增/递减函数。为此，我绑定了两个事件处理程序，只传递1 / -1。

document.getElementById('previous').addEventListener('click', function(){
    var data = click(-1);
    updateValues(data);
});

document.getElementById('next').addEventListener('click', function(){
    var data = click(1);
    updateValues(data);
});

这是一个演示的小提琴：

http://jsfiddle.net/uL8fb/

希望这有帮助！

jQuery点击数组，在页面上更改3项

1 个答案: