добавить/удалить класс в зависимости от высоты элемента на лета

Question

У меня есть элемент, который необходимо изменить высоту в зависимости от высоты своего ребенка р тэга:

<div id="eventpg" class="bg-pink linkbox"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</p> 
</div> 

Я achived желаемого изменения, добавив класс, если абзац над определенной высоты:

var divheight = $("#eventpg p").height(); 
if (divheight > 173) { 
    $("#eventpg").addClass("height535"); 
} 

который добавляет этому классу этот класс:

. height535{height:535px;} 

Это работает отлично в большинстве случаев, но если пользователь поворачивает свое устройство с портрета на пейзаж, добавленный класс все еще остается, и страница должна быть перезагружена, чтобы удалить его.

Как достичь изменения высоты «на лету» как бы? Таким образом, если окно браузера изменится, что приведет к изменению высоты абзаца, контейнер изменится, чтобы отразить это?

Благодаря

Answer 1

Вы должны быть в состоянии выполнить функцию на load и resize:

$(window).on('load resize', function() { 
    var divheight = $("#eventpg p").height(); 
    if (divheight > 173) { 
     $("#eventpg").addClass("height535"); 
    } 
})' 

Answer 2

Вы можете прослушивать события изменения размеров, добавление или удаление класса по мере необходимости:

var heightThreshold = 173; // controlling the height globally may be easier 

$(window).resize(function() { 

    var el  = $("#eventpg"), 
     divheight = el.find("p").height(); 

    if (divheight > heightThreshold) { 
     el.addClass("height535"); 
    } else { 
     el.removeClass("height535"); 
    } 

}); 

или сделать что-то подобное, например jQuery Mobile orientationchange событие - см. here

Answer 3

Спасибо за помощь. используя комбо один и единственный ответ ChemistryBlob-х и Дерек рассказа, происходит некорректно работал успешно:

$(window).on('load resize', function() { 
    var divheight = $("#eventpg p").height(); 
    if (divheight > 173) { 
     $("#eventpg").addClass("height535"); 
    } else { 
     $("#eventpg").removeClass("height535"); 
    } 
});