在点击时将值添加到background-position（jQuery） [英] Adding amount to background-position on click (jQuery)

问题描述

我对js和jquery很新，所以请与我一起。

我想更改背景位置，在＃div1上添加1％ ＃pt

如何在jQuery中实现此功能？

$ b b

还有，奖金问题：
这些都是通过php动态生成的。是否可以在js脚本中使用php，以使id正确？

像这样：

  $ i = 1 
 while（$ i <= 5）：
 $ div [$ i] ='div'。 
 $ leftbutton [$ i] ='leftbotton'。$ i; 
 $ rightbotton [$ i] ='rightbotton'。$ i; 
 $ i ++; 
 endwhile; 
  

Else我必须学习如何在js中创建循环）;

修改：

如何使用此值更新文本字段我点击按钮？如果我想添加向上/向下按钮，如何修改它？感谢一堆！

提前感谢！
-Simon

解决方案

像这样：

  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）; 
  

EDIT ：修正错误。

演示

I pretty new to js and jquery so please bear with me.

I'd like to change the background-position and add 1% on #div1 while clicking on #button1 and take -1% on #div1 while clicking on #button2

How could i achive this in jQuery?

Alse, bonus question: These are going to get dynamically generated through php. Is it possible to use php in the js-script so the id's get correct?

like this:

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

Else i'll have to learn how to make loops in js as well ;)

Edit: Follow up questions:

How can i update a text field with this value as i click the buttons? And how do i modify it if i'd like to add up/down buttons as well? thanks a bunch!

Thanks in advance! -Simon

解决方案

Like this:

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);

EDIT: Fixed mistakes.

Demo

这篇关于在点击时将值添加到background-position（jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！