访问图像源动态变化

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

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

Answer 1

您正在使用 large-image class 在所有元素上初始化插件，插件可能只作用于第一个元素。执行此操作以仅定位点击的元素：

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

访问图像源动态变化

Accessing the image source changed dynamically

jquery

dom