サイズ変更イベントでラップアンドアンラップを使用する

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を使用しています。コードは機能しますが、問題はサイズ変更で関数を実行していることです。サイズを変更すると、アンカータグが削除されることがあり、時にはアンカータグが削除されることもあります。他の時には、複数のアンカータグがイメージをラップします。

$(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の場合はアンカーを削除されません、そして後ろにそれを追加する画面が> =の場合：

この

は、私が使用していますjQueryのです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タグをrewrapsが、その後、アンカータグはもはやそれが行うべき方法では機能しません。これは私がモーダルに正しいイメージを置くために持っているコードです：

$('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 a.imgpop img').parent().is ('a') { 
    $('section a.imgpop img').unwrap(); 
} 
} 

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