Where to add jquery "this"?

Question

 $(window).load(function() {


        var paircount = 0;
        var $thisSprite = $("#%id% img.imageStyle");




        if ($.browser.msie)
        {
          // I need this only if desaturate png with aplha channel
          $thisSprite = $thisSprite.desaturateImgFix();
        }

    // modified not to desaturate the clone
    $thisSprite.each(function(){
     $(this).addClass("%id%")
      .clone()
      .attr('id', '')
      .addClass('color')
      .hide()
      .insertAfter($(this))
    });

    // desaturate all occourances
     $thisSprite = $thisSprite.desaturate();


     // Need to remove this instance of the desaturated origonal below on hover
     // currently shows both on hover...???????????


    // add events for switch between color/gray versions
    $('.centered_image').bind('mouseenter mouseleave', function(e){
     $(this).find('img').toggle().toggleClass('color');
    });

 });

New test at http://www.doobox.co.uk/test/test.html

Kind regards
Gary.

Answer 1

If you use JQuery then this is used in following way -

$('#id',this).hide();

Hope this helps you.

Answer 2

I don't see a loop and this just seems to confuse things:(use caution if you minify here)

 $thisSprite.addClass("pair%id%_" + ++paircount);

seems to equate to:

$thisSprite.addClass("pair%id%_" + 1);

which, if you break it down is:

 $thisSprite.addClass("pairsomeIDhere_1");

Do you have such a class in your CSS?

 var classString = new String($(this).attr('class'));

can simply be:

 var classString = $(this).attr('class');

change:

$thisSprite.bind("mouseenter mouseleave", desevent);       
$cloned.bind("mouseenter mouseleave", desevent);       

to pass the event:

$thisSprite.bind("mouseenter mouseleave", desevent(event));       
$cloned.bind("mouseenter mouseleave", desevent(event));   

Answer 3

From looking at your test page, I think the problem is you need to cycle through each image. I tried testing this, but I was having trouble, so sadly this script is untested:

$(window).load(function() {

    if ($.browser.msie)
    {
      // You need this only if desaturate png with aplha channel
      $thisSprite = $thisSprite.desaturateImgFix();
    }

    $thisSprite.each(function(){
     $(this).clone()
      .removeAttr('id')
      .addClass('color')
      .hide()
      .insertAfter($(this))
      .desaturate();
    });

    // add events for switch between color/gray versions
    $('.centered_image').bind('mouseenter mouseleave', function(e){
     $(this).find('img, canvas').toggle().toggleClass('color');
    });
});

Answer 4

Got there in the end thank for the pointers here, helped greatly.

 $(window).load(function() {


        var paircount = 0;
        var $thisSprite = $("#%id% img.imageStyle");




        if ($.browser.msie)
        {
          // I need this only if desaturate png with aplha channel
          $thisSprite = $thisSprite.desaturateImgFix();
        }

    // modified not to desaturate the clone
    $thisSprite.each(function(){
     $(this).addClass("%id%pair")
      .clone()
      .attr('id', '')
      .insertAfter($(this))
      .addClass('%id%color')
      .hide()
    });

    // desaturate all occourances
     $thisSprite.desaturate()


     // Need to remove this instance of the desaturated origonal below on hover


    // add events for switch between color/gray versions
    $('.container').bind('mouseenter mouseleave', function(e){
     $(this).find('.%id%pair').toggle().toggleClass('%id%color');
    });

 });