创建JavaScript函数来切换精灵

Question

I am working on creating a JS/jQuery function to toggle the position of an icon sprite. So far I have gotten this code to work:

$('.toggle-completed').mouseup(function(){
var sp = ($(this).css('background-position'));
$(this).css('background-position', 
    sp = sp == '-82px 50%'? '-101px 50%' : '-82px 50%'
);
});

However I want to abstract this so that it can work with any sprite pair. Something like this:

var toggleSprite = function(firstPosition, secondPosition){
var sp = ($(this).css('background-position'));
$(this).css('background-position',
    sp = sp == firstPosition ? secondPosition : firstPosition
);
};

Which would be called as follows:

toggleSprite('-82px 50%', '-101px 50%');

However this code generates an error:

Uncaught TypeError: Cannot use 'in' operator to search for 
'backgroundPosition' in undefined 

I am thinking that either 1. I can't really use 'this' in a function. Or perhaps I am not calling the function correctly.

Thank you.

Answer 1

Inside of a jQuery callback, this often refers to the DOM element that triggered the event, so can be used in a selector ( $(this) ), but in your example that creates an error, the context is a vanilla js function, so this refers to the current scope, not a DOM object.

Perhaps extend the jQuery fn object...

jQuery.fn.toggleSprite = function(firstPosition, secondPosition){
var sp = ($(this).css('background-position'));
$(this).css('background-position',
    sp = sp == firstPosition ? secondPosition : firstPosition
);
// also, return $(this) so that chaining is not broken...
return $(this);
};

And call like this...

$('.some.selector').toggleSprite('-82px 50%', '-101px 50%');

So that the function knows what this refers to.

Answer 2

The problem seems to be in the is the this reference... it does not looks like to be referencing the target element.

I think you can write it as a simple plugin like

$.fn.toggleSprite = function (firstPosition, secondPosition) {
    return $(this).css('background-position',    function(idx, sp){
        return sp = sp == firstPosition ? secondPosition : firstPosition;
    });
};

then call it like

$(this).toggleSprite('pos1', 'pos2');//or $(el)

---

or pass the elements as a param to the method

var toggleSprite = function (els, firstPosition, secondPosition) {
    $(els).each(function () {
        var sp = $(this).css('background-position');
        $(this).css('background-position', sp = sp == firstPosition ? secondPosition : firstPosition);
    });
};

then

toggleSprite(myels, 'pos1', 'pos2')

---

A third option is to pass a custom context to the toggle method using Function.call()

toggleSprite('-82px 50%', '-101px 50%').call(myel);

Answer 3

The problem you're having has to do with the fact that the function context this is not bound to a specific DOM element when used in a generic (ie non-jQuery) function. One of the more powerful features of the jQuery library is that the function context this is bound to the DOM element that calls the jQuery function, allowing the user to easily target a specific element. In regular JavaScript, this refers to the current scope, which in your case is the function toggleSprite .

For your purposes, I think a simple jQuery plugin function would do the trick:

$.fn.toggleSprite = function(pos1, pos2) {
  return $(this).css('background-position', function(_, sp){
    return sp == pos1 ? pos2 : pos1;
  });
};

The benefit of this method is that you can then call this function on any jQuery object as you normally would:

$('.sprite').toggleSprite('-82px 50%', '-101px 50%');