单击时切换背景位置 [英] Toggling background position on click

问题描述

我正在努力实现这个目标是否有一种简单的方法可以在点击事件中切换两种状态之间的背景位置？

我构建了一个函数应该工作..还没有得到线索为什么它不会。我花了几个小时试图为我的项目中这么乏味的部分实现这个目标，但这是必要的。

请看一下这个函数：

  $（ #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））{
返回.arrowsup; 
} else {
返回.arrows; 
} 
}）; * / 
 $（'＃secondarrow' ）.toggle（function（）{
 $（＃arrow2）。css（'backgroundPosition'，'0px -15px'）; 
}，function（）{
 $（ ＃arrow2）。css（'backgroundPosition'，'0px 0px'）; 
}）; 
 $（＃ukmore）。slideToggle（100）; 
 $（＃clause ）。slideToggle（100）; 
}）; 
  

它应该做的是，点击div名称第二个箭头，它会显示一些子类别和同时切换div子项的背景位置，其ID为＃arrow2，箭头指向下方（表示点击以显示更多）箭头这是指向同一背景图像的一部分（表示点击隐藏子类别）。

我试过一些不同的功能结构，但它们都没有按要求工作，最新的 - 没有注释掉的 - 确实改变了背景位置以显示向上的箭头，但它只在第一次点击时执行它并且仅执行它当直接点击＃arrow1 div时，我需要它来点击#secondarrow div来回切换。

请帮忙。

解决方案

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

.toggle 也是一个事件处理程序，所以你基本上添加了一个新的点击处理程序，用于在点击项目时进行切换。 / p>

你只需要这样做：

  $（ #secondarrow）。toggle（function（）{
 $（＃arrow2）。css（'backgroundPosition'，'0px -15px'）; 
 //首次点击
}做更多的东西，函数（）{
 $（＃arrow2）。css（'backgroundPosition'，'0px 0px'）; 
 //在第二次点击时做更多的东西
}）; 
  

我无法检查上述内容是否适合您。我建议您将代码放在jsFiddle中以获取stackoverflow问题。

第二件事

最好使用第二个位置创建一个css类，然后绑定一个切换该类的click事件：

  $（＃secondarrow）。click（function（）{
 $（＃arrow2）。toggleClass（'position2'）; 
}）
  

提示：

使用firebug或chrome开发人员工具调试代码。您可以检查选择器是否正确。
另外，阅读有关选择器缓存的信息，例如。 $元素= $（的东西。）; $ element.show（）

I am trying to achieve this Is there an easy way to toggle background position between two states on click event?

I have constructed a function that should work.. haven't got a clue why it won't. I have spent a number of hours trying to achieve this for such a tedious part of my project, but it's necessary.

Please take a look at this function:

$("#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);
});

What it should do is, on clicking the div name second arrow, it reveals a number of sub-categories and at the same time toggle the background position of a div child with the id #arrow2 from an arrow that's pointing down (to indicate click to reveal more) to an arrow that's pointing up which is part of the same background image (to indicate click to hide sub-categories).

I have tried a number of different function structures but none of them are working as required, the latest one - the one that isn't commented out - does change the background position to show the arrow pointing up but it only does it the on the first click AND only does it when clicking directly on the #arrow1 div, when I need it to toggle back and forth on clicking the #secondarrow div.

Please help.

解决方案

First of all - you need to practise handling events a bit more.

.toggle is also an event handler, so you basically add a new click handler for toggling when the item is clicked.

You only need to do something like this:

$("#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
    });

I can't check if the above will work for you. I recommend putting your code in jsFiddle for stackoverflow question too.

Second thing

It is better to create a css class with the second position and then bind a click event in which you toggle the class:

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

And a tip:

Use firebug or chrome developer tools to debug your code. You can check if your selector was correct. Also,read about selector caching, eg. $element=$('.something'); $element.show()

这篇关于单击时切换背景位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！