jquery - 访问动态变化的图像源

Question

我有一些像这样的图像和代码，当单击拇指时它会更改大图像。:

image-01-thumb.jpg
image-01-full.jpg
image-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 动态更改为 image-02-full.jpg 时，它仍然将效果应用于 image-01-full.jpg

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

Answer 1

您正在使用large-image类在所有元素上初始化插件，并且该插件可能仅作用于第一个元素。执行此操作以仅定位单击的元素:

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