在点击时添加数量到背景位置（jQuery）

Question

我对 js 和 jquery 还很陌生，所以请多多包涵。

我想更改背景位置并在单击#button1 时在#div1 上添加1%，并在单击#button2 时在#div1 上添加-1%

我如何在 jQuery 中实现这一点？

另外，奖金问题： 这些将通过 php 动态生成。是否可以在 js-script 中使用 php 以使 id 正确？

像这样：

$i = 1
while($i <= 5):
 $div[$i] = 'div'.$i;
 $leftbutton[$i] = 'leftbotton'.$i;
 $rightbotton[$i] = 'rightbotton'.$i;
$i++;
endwhile;

否则我必须学习如何在 js 中制作循环；)

编辑：跟进问题：

如何在单击按钮时使用此值更新文本字段？如果我还想添加向上/向下按钮，我该如何修改它？非常感谢！

提前致谢！ -西蒙

Answer 1

像这样：

function makeClicker(index) {
    $('#leftbutton' + index).click(function() {
        var bPos = $('#div' + index).css('background-position');
        bPos = bPos.replace(/%/g, '').split(' ');
        bPos = (-1 + parseInt(bPos[0], 0)) + '% ' + bPos[1] + '%';
        $('#div' + index).css('background-position', bPos);
    });
    $('#rightbutton' + index).click(function() {
        var bPos = $('#div' + index).css('background-position');
        bPos = bPos.replace(/%/g, '').split(' ');
        bPos = (1 + parseInt(bPos[0], 0)) + '% ' + bPos[1] + '%';
        $('#div' + index).css('background-position', bPos);
    });
}

for(var i = 1; i <= 5; i++)
    makeClicker(i);

编辑：修正错误。

Demo