Comment utiliser .replaceWith pour réécrire le HTML en fonction de la largeur de la page, sans actualisation?

Question

Je tente de remplacer certains blocs de balises HTML par différents blocs HTML en fonction de la largeur du navigateur. J'ai un modèle de travail - Voir la rubrique: "Plans de santé ACME".

codepen

Actuellement, je suis en utilisant:

$('document').ready(function(){ 
    if (window.matchMedia('(max-width: 767px)').matches) { 
    var size = $(window).width(); 
    $('h4.title1').replaceWith('<h4 class="panel-title"><a role="button" class="footer-heads" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" data-href-mobile="#collapseOne" data-href-desktop="https://www.google.com/"><strong>ACME Health Plans</strong></a></h4>'); 
    $('.footer-collapse').addClass('panel-collapse collapse'); 
    $('.footer-heads').addClass('collapsed'); 
    } else { 
    $('h4.title1').replaceWith('<h4 class="panel-title"><strong>ACME Health Plans</strong></h4>'); 
    $('.footer-collapse').removeClass('panel-collapse collapse'); 
    $('.footer-heads').removeClass('collapsed'); 
    } 
}); 

L'objectif est d'utiliser .replaceWith pour échanger le HTML, mais pour qu'elle prenne effet que je dois rafraîchir la page. Existe-t-il un moyen de contourner ce problème et/ou existe-t-il un meilleur moyen d'atteindre ce résultat sans avoir besoin d'actualiser la page?

Answer 1

Vous pouvez appeler votre fonction après chaque événement resize fenêtre:

$('document').ready(function(){ 
    $(window).resize(resizeHtml); 
    function resizeHtml(){ 
    if (window.matchMedia('(max-width: 767px)').matches) { 
     var size = $(window).width(); 
     $('h4.title1').replaceWith('<h4 class="panel-title"><a role="button" class="footer-heads" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" data-href-mobile="#collapseOne" data-href-desktop="https://www.google.com/"><strong>ACME Health Plans</strong></a></h4>'); 
     $('.footer-collapse').addClass('panel-collapse collapse'); 
     $('.footer-heads').addClass('collapsed'); 
    } else { 
     $('h4.title1').replaceWith('<h4 class="panel-title"><strong>ACME Health Plans</strong></h4>'); 
     $('.footer-collapse').removeClass('panel-collapse collapse'); 
     $('.footer-heads').removeClass('collapsed'); 
    } 
    } 
}); 

Autres façons d'attribuer une fonction à l'événement resize seraient:

window.onresize = resizeHtml; 
window.addEventListener('resize', resizeHtml); 

Notez qu'il ya des problèmes de performances lors de la fixation fonctions à l'événement de redimensionnement de la fenêtre et si vous faites beaucoup de traitement, l'étranglement des événements peut être la voie à suivre: https://gomakethings.com/javascript-resize-performance/