I'm currently using this script to create a basic image gallery. However, I am encountering an issue where the border style of the image within 'this' is not changing as expected. Can you help me identify what I might have done incorrectly?
$('.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: The code has been updated and now incorporates the corrections suggested in some of the 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');
});