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将其删回。代码有效，但问题是我在调整大小时执行这些功能。调整大小时，有时会删除锚标记，有时它不会被删除。其他时候，多个锚标签将包裹图像。

这是我正在使用的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时移除锚点，如果屏幕大于＆gt; = 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'));
    }
})

在将尺寸缩小到＆lt; 992之前单击其中一个图像时调用此事件。一旦我缩小了尺寸，然后将其调整为＆gt; = 992，事件就不再触发了，而且我没有在模态中获取图像。在打开和重新包装图像之前和之后，我使用Firefox show source查看了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>');
}
}
});

在resize事件

1 个答案: