.replaceWith를 사용하여 새로 고치지 않고 페이지 너비에 따라 HTML을 다시 쓰는 방법?

Question

브라우저의 너비에 따라 HTML 마크 업의 특정 블록을 다른 HTML 블록으로 바꾸려고합니다. 나는 일하는 모델이 있습니다 - "ACME Health Plans"제목을보십시오.

$('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'); 
    } 
}); 

목표는 HTML을 교환하는 .replaceWith을 사용하는 것입니다,하지만 내용을 적용하려면 내가 페이지를 새로 고침 할 필요가 : 현재

codepen

, 내가 사용하고 있습니다. 이 문제를 해결할 수있는 방법이 있습니까? 페이지를 새로 고칠 필요없이이 결과를 얻을 수있는 더 좋은 방법이 있습니까?

Answer 1

당신은 각각의 창 크기 조정 이벤트 다음 함수를 호출 할 수 있습니다 : resize 이벤트에 기능을 할당 할 수

$('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'); 
    } 
    } 
}); 

다른 방법은 다음과 같습니다 성능 문제가 있습니다

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

하는 것으로 부착 할 때 함수를 윈도우 크기 조절 이벤트에 적용하면 처리량이 많을 경우 이벤트를 조절하면 갈 수 있습니다. https://gomakethings.com/javascript-resize-performance/