对resize事件使用wrap和unwrap

Question

我有一些jQuery来传递一个图像给一个模态。当有人点击一个较小的图像时，它会在模式中显示该图像。代码本身运行良好。我遇到的问题是屏幕尺寸较小。当屏幕宽度较小时，图像占据设备的整个宽度，并且实际上大于模式中显示的图像。在这些情况下，我想删除图像周围的锚标记，这样它就不再是可点击的。下面是HTML的一个示例：

<a href="#" class="imgpop" data-target="#image-popup" data-toggle="modal">
    <img src="images/carbcalc.png" alt="" class="img-fluid">
</a>

我使用jQuery unwrap删除锚定标记，并使用wrap将其放回原处。代码可以工作，但问题是我正在执行resize中的函数。调整大小时，锚标签有时会被移除，有时不会。其他时候，多个锚标签会将图像包裹起来。

这是我正在使用的jQuery：

$(window).on('resize', function() {
    if ($(window).width() == 991) {
        console.log("991");
        $('section a.imgpop img').unwrap();
    }

    if ($(window).width() == 992) {
        console.log("992");
        $('section a.imgpop img').wrap('<a href="#" class="imgpop" data-target="#image-popup" data-toggle="modal"></a>');
    }
});

我想做的是，如果屏幕宽度小于992，则移除锚点，如果屏幕是>= 992，则重新添加锚点。

代码有时会起作用。有时，我会将值记录到控制台中，但它并不像正常情况下那样频繁。

有没有更好的方法来处理这件事？

编辑：

使用下面的建议，以及我自己的一些调整，我有以下几点：

$(window).on('resize', function() {
    var img = $('section img');

    if ($(window).width() < 992) {
        if (img.parent().hasClass('imgpop')) {
            $(img).unwrap();
        }
    }
    else if ($(window).width() >= 992) {
        if (!img.parent().hasClass('imgpop')) {
            $(img).wrap('<a href="#" class="imgpop" data-target="#image-popup" data-toggle="modal"></a>');
        }
    }
});

它可以工作，并用锚标签重新包装img标签，但在那之后，锚标签不再以它应该的方式工作。这是我用来将正确的图像放入模式的代码：

$('a').on('click', function() {
    if ($(this).hasClass('imgpop')) {
        let img = $(this).find('img');
        let modal = $('.modal .modal-dialog .modal-content .modal-body img');
        modal.attr('src', img.attr('src'));
    }
})

在将大小减小到<992之前，当单击其中一个图像时将调用此事件。一旦我减小了大小，然后将其调整为>=992，事件就不再触发，并且我在模式中也得不到图像。在打开和重新包装图像之前和之后，我使用Firefox查看了HTML显示源代码，它看起来完全一样。

任何想法，我可以解决这个问题，并完成这个项目。

Answer 1

你只需要检查一下就可以了。

$(window).on('resize', function() {
if ($(window).width() <= 991) {
    console.log("991");
if ( $('section img.img-fluid').parent().is ('a') {
    $('section img.img-fluid').unwrap();
}
}

if ($(window).width() >= 992) {
    console.log("992");
if ( !$('section img.img-fluid').parent().is ('a') {
    $('section img.img-fluid').wrap('<a href="#" class="imgpop" data-target="#image-popup" data-toggle="modal"></a>');
}
}
});