更改「；x"；在背景位置：“；x"；px“；“是”；px对类使用jQuery/Javascript

我刚刚开始使用精灵来减少HTTP请求，在将处理悬停动画的旧脚本转换到新系统时遇到了一点问题。我真的不想每个按钮都有一个单独的功能，因为这很痛苦，尤其是按钮的数量，即使是复制和粘贴也会很痛苦。我也不认为这是最有效的做事方式，从长远来看，效率是这里的目标

我已经做到了这一点：

$(".socButton").hover(function(){
        var iD = $(this).attr("id");

        var pos = $("#" + iD).css("background-position");

        var splitPos = pos.split("px");

        splitPos[0] = parseInt(splitPos[0]) += 24;

        newPos = splitPos.join("px");

        alert(newPos);

}, function(){

});

但是newPos变量没有发出警报。我尝试了一些看起来更简单的方法，只改变“background-position-x”，但没有骰子

我不确定我是否需要识别元素的id来更改它，但在样式表中具有背景位置的是id，而不是类，所以我不确定

任何指导都非常感谢

提前谢谢

---

编辑：我觉得我也应该指出，在我添加parseInt之前，它发出的警报很好，但是在我添加它之前，出现了一些奇怪的结果。

不，您不需要元素的ID。jQuery应用内联样式

无论如何，如果在CSS中为

.socButton

设置第二条规则，也就是

.socButton.hover

，它将具有正确的悬停状态背景位置，可能会更容易。在jQuery中，您只需使用

$（this.toggleClass（'hover'）

切换

悬停

类即可

---

您想进一步添加什么？你只需提醒新POS，就这样？现在我只是想提醒它，这样我就可以看到它是否工作了，但最终我会将“背景位置”更改为新POS。你可能会在下面找到有用的答案，但解析int的+=是导致你出问题的原因。这非常有效，非常好。虽然我不确定你的建议，但我不知道你如何能用精灵做到这一点，而不必为每个按钮都编写单独的脚本（尽管更短）。

$(".socButton").hover(function() {
    var pos = $(this).css("background-position");

    var splitPos = pos.split("px");

    splitPos[0] = parseInt(splitPos[0]);
    splitPos[0] += 24.0;

    newPos = splitPos.join("px");

    alert(newPos);
    $(this).css({"background-position": newPos});

}, function(){

});