jquery - 单击时切换背景位置

Question

我正在努力实现这个Is there an easy way to toggle background position between two states on click event?

我已经构建了一个应该工作的函数..不知道为什么它不起作用。我花了几个小时试图在项目中如此乏味的部分实现这一目标，但这是必要的。

请看一下这个函数:

$("#secondarrow").click(function(){
    /*$(".arrows").toggle( 
    function(){ 
        $(this).css({"background-position":"0px 0px"}); 
    },  
    function(){ 
        $(this).css({"background-position":"0px -30px"}); 
    });*/
    /*$(".arrows").toggleClass(function() {
    if ($(this).is(".arrows")) {
    return ".arrowsup";
    } else {
    return ".arrows";
    }
    });*/
    $('#secondarrow').toggle(function() { 
    $("#arrow2").css('backgroundPosition', '0px -15px'); 
    }, function() { 
    $("#arrow2").css('backgroundPosition', '0px 0px'); 
    });
$("#ukmore").slideToggle(100);
$("#clause").slideToggle(100);
});

它应该做的是，单击 div 名称第二个箭头时，它会显示许多子类别，并同时切换 ID 为 #arrow2 的 div 子项的背景位置从向下的箭头(表示单击以显示更多内容)到作为同一背景图像一部分的向上箭头(表示单击以隐藏子类别>).

我尝试了许多不同的功能结构，但没有一个能够按要求工作，最新的一个 - 没有注释掉的一个 - 确实改变了背景位置以显示向上的箭头，但它只是这样做第一次单击时，并且仅在直接单击 #arrow1 div 时才执行此操作，当我需要它在单击 #secondarrow div 时来回切换时。

请帮忙。

Answer 1

首先 - 您需要多练习处理事件。

.toggle也是一个事件处理程序，因此您基本上添加一个新的单击处理程序，用于在单击该项目时进行切换。

你只需要做这样的事情:

$("#secondarrow").toggle(function() { 
    $("#arrow2").css('backgroundPosition', '0px -15px');
    //do more stuff on first click
    }, function() { 
    $("#arrow2").css('backgroundPosition', '0px 0px'); 
    //do more stuff on second click
    });

我无法检查上述内容是否适合您。我建议也将您的代码放入 jsFiddle 中以解决 stackoverflow 问题。

第二件事

最好创建一个具有第二个位置的 css 类，然后绑定(bind)一个单击事件来切换该类:

$("#secondarrow").click(function(){
   $("#arrow2").toggleClass('position2');
})

还有一个提示:

使用 firebug 或 chrome 开发者工具来调试代码。您可以检查您的选择器是否正确。 另外，请阅读有关选择器缓存的信息，例如。 $element=$('.something'); $element.show()