访问图像源动态更改

Question

我有一些像这样的图像和代码，当点击一个拇指时会改变大图像。：

图像-01-thumb.jpg
图像-01-full.jpg
图像-02-thumb.jpg
图像-02-full.jpg

$.each($('img'), function () {
    if ($(this).attr('src').toString().indexOf('thumb.jpg') > -1) {
        $(this).on('click', function () {
            $('.large-image').attr('src', $(this).attr('src').replace('thumb', 'full'));
        });
    }
});

但是当我尝试访问图像的src以应用某些插件的效果时，DOM没有更新，我总是访问原始的src：

$(document).on('click', '.large-image', function () {
    $('.large-image').pluginEffect();
});

当我将图像src改为图像-02-full.jpg时，它仍将效果应用于image-01-full.jpg

如何访问更新的src或如何刷新DOM？

Answer 1

您正在使用large-image类在所有元素上初始化插件，并且插件可能仅在第一个上执行。这样做只针对被点击的元素：

$(document).on('click', '.large-image', function () {
    $(this).pluginEffect();
});