Where to add jquery "this"? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 8 years ago.

Improve 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
    $('开发者_StackOverflow.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.

---

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

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

Hope this helps you.

---

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));   

---

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');
    });

 });

---

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');
    });
});