javascript - 如何动态更改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"代表mainblocks__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)，扰流板高度 255px 实际上太小了。我想动态更改参数 data-h 。类似的东西

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

但我不知道该怎么做。感谢您提供任何好的建议。

Answer 1

你的想法应该可行。关于如何更改 data-h 值的小调整:

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