php - 单击时将数量添加到背景位置(jQuery)

Question

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

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

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

此外，奖金问题:这些将通过 php 动态生成。是否可以在 js 脚本中使用 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