更改背景位置中的“x”：“x”px“y”px 使用 jQuery/Javascript 进行类

Question

我刚刚开始使用 sprite 来减少 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 之前它的警报很好，但在我添加它之前出现了一些奇怪的结果。

Answer 1

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

无论如何，如果你的 CSS 中有第二条.socButton 规则，即.socButton.hover，它可能会更容易，它对于悬停状态有正确的背景位置。在 jQuery 中，您只需使用 $(this).toggleClass('hover') 切换 hover 类。

http://jsfiddle.net/Rn6f4/

$(".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(){

});