Question

I quick question concerning the value of the jquery variable “this”.

I took some sample code shown below…

function blockHighlite()
{
//  alert ('block ' + $gCurrentClass + ' index ' + $gIndex);

        $(this).data('bgcolor', $(this).css('border-color'));
        $(this).css('border-color','rgba(255,128,0,.5)');
        $(this).css('border-color', $(this).data('bgcolor'));
  };

This code works fine to highlite the element border, but when I chage the code to point to a specific element like this, using global variables to represent the selected element it fails.
Am I not understanding the use of the “this” variable? The variable $gCurrentClass and $gIndex are simply the class and index of my selected element.

function blockHighlite()
{
    alert ('block ' + $gCurrentClass + ' index ' + $gIndex);
        $gCurrentClass.eq[$gIndex].data('bgcolor', $gCurrentClass.eq[$gIndex].css('border-color'));
        $gCurrentClass.eq[$gIndex].css('border-color','rgba(255,128,0,.5)');
        $gCurrentclass.eq[$gIndex].css('border-color', $gCurrentClass.eq[$gIndex].data('bgcolor'));
  };

Any help will be appreciated.

Answer 1

Assuming $gCurrentClass contains a string representing a classname, you need to pass it to the jQuery constructor ($) as a query selector. Try the following:

function blockHighlite()
{
    alert ('block ' + $gCurrentClass + ' index ' + $gIndex);
    $('.'+$gCurrentClass).eq($gIndex).data('bgcolor', $('.'+$gCurrentClass).eq($gIndex).css('border-color'));
    $('.'+$gCurrentClass).eq($gIndex).css('border-color','rgba(255,128,0,.5)');
    $('.'+$gCurrentclass).eq($gIndex).css('border-color', $('.'+$gCurrentClass).eq($gIndex).data('bgcolor'));
};