Как динамически изменять некоторые данные внутри кода DIV html

Question

У меня есть код html, который на самом деле является спойлером на веб-странице.

<div data-h="255" class="mainblocks__text moretext text">
    <div class="moretext__block">
        <p>Some loooong text</p>
    </div>
</div>
<div class="moretext__more"></div>

Параметр data-h = "255" обозначает максимальную высоту основных блоков __text Спойлер обрабатывается функцией JS, которая работает следующим образом: «пользователь нажимает на div moretext__more , и испорченный открывается. Нажмите еще раз, и спойлер будет закрыт. Как я уже говорил, высота спойлера всегда равна 255px ( data-h = "255") "

Вот сама функция:

function moretext(){
    if($('.moretext').length>0){
        $.each($('.moretext'), function(index, val) {
            if($(this).find('.moretext__block').outerHeight()>$(this).data('h')){
                $(this).css('max-height', $(this).data('h')).removeClass('active');
                $(this).parent().find('.moretext__more').show().removeClass('active');
            }else{
                $(this).parent().find('.moretext__more').hide();
            }
        });
    }
}
    moretext();

$('.moretext__more').click(function(){
        $(this).toggleClass('active');
        $(this).parent().find('.moretext').toggleClass('active');
    if($(this).parent().find('.moretext').hasClass('active')){
        $(this).parent().find('.moretext').animate({maxHeight:$(this).parent().find('.moretext__block').outerHeight()},300);
    }else{
        $(this).parent().find('.moretext').animate({maxHeight:$(this).parent().find('.moretext').data('h')},300);
    }
    return false;
});  

Все работает нормально, однако, если у меня широкоформатный экран (например, 2080 * 1080), спойлер Высота 255 пикселей на самом деле слишком мала. Я хотел бы изменить параметр data-h динамически. Что-то вроде

 if ( $(window).width() > 2000 ) {  
            data-h = 455px;  
        }  

Но я не могу понять, как это сделать. Спасибо за любой хороший совет.

Answer 1

Ваша идея должна работать. Небольшая настройка того, как изменить значение data-h:

if ( $(window).width() > 2000 ) {  
        $(".mainblocks__text").data('h', 455);  
} 

Answer 2

if ( window.innerWidth > 2000 ) {
    $('.mainblocks__text').attr('data-h', '455');
}