javascript - 更改背景位置 : "x"px "x"px using jQuery/Javascript for a class 中的 "y"

Question

我刚刚开始使用 sprites 来减少 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 才能更改它，但在样式表中具有 background-position 的是 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(){

});