更改子图像样式

Question

I am using this script for a simple image gallery. On the last line, I am trying to change the border of the image within 'this' but the style is not changing for some reason. What have I done wrong?

$('.gallery-image').on('click',function(){
    var bigCurrent = $('.hero-image').attr('src'); //the current large image src
    var bigThumb = $('.hero-image').attr('data-smSrc'); //the thumb version src of the current large image
    var thumbSm = $(this).attr('src'); //the currently being clicked on thumb's src
    var thumbLgSrc = $(this).attr('data-lgSrc'); //the large version src of the currently being clicked on thumb

    $('.hero-image').attr('src', thumbLgSrc);
    $('img', this).css('border','2px solid #fff');

});

UPDATE: This is working and follows the corrections made in some comments below

$('.gallery-image').on('click',function(){
    var bigCurrent = $('.hero-image').attr('src'); //the current large image src
    var bigThumb = $('.hero-image').attr('data-smSrc'); //the thumb version src of the current large image
    var thumbSm = $('img', this).attr('src'); //the currently being clicked on thumb's src
    var thumbLgSrc = $(this).attr('data-lgSrc'); //the large version src of the currently being clicked on thumb

    $('.hero-image').attr('src', thumbLgSrc);

    $('.selected').removeClass('selected');

     $('img', this).addClass('selected'); 
});

Answer 1

Without seeing this failing, chances are, you are trying to select the wrong thing.

You have $(this).attr('src') , which implies that this is the image node itself, because that attribute is specific to img . Yet you try to select an img within this context, and since img can't have children, it's unlikely there are any img nodes to find.

Try changing it to just $(this).css(...) instead.