更改子图像样式

Question

我将此脚本用于一个简单的图片库。在最后一行，我试图在 'this' 内更改图像的边框，但由于某种原因样式没有改变。我做错了什么？

$('.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');

});

更新：这是有效的，并遵循下面一些评论中所做的更正

$('.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

如果没有看到此失败，很可能您正在尝试 select 错误的事情。

您有 $(this).attr('src')，这意味着 this 是图像节点本身，因为该属性特定于 img。但是您尝试在 this 上下文中 select 一个 img，并且由于 img 不能有 children，因此不太可能有任何 img要查找的节点。

尝试将其更改为 $(this).css(...)。

更改子图像样式

Change child image style

javascript

image-gallery