jq判断行数字数超出显示展开收起

最新推荐文章于 2024-01-31 00:32:18 发布

金翅

最新推荐文章于 2024-01-31 00:32:18 发布

阅读量337

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_37103514/article/details/129695386

版权

$(function(){
            //通过行数判断是否显示展开收起
            $('.goods_myComm li').each(function(index){
                let _this = $(this).find('.mycomm_text')
                let Height = _this.height(); // 获取文本的高度
                let Width = _this.width(); // 获取文本的宽度
                let lineHeight = _this.css('line-height'); // 获取一行的高度（行高）
                let fontSize = _this.css('font-size'); // 获取一行的字数
                let hangSum = parseFloat(Height) / parseFloat(lineHeight); // 行数
                let count = parseFloat(Width) / parseFloat(fonÏtSize); // 字数
                let sum = parseInt(count) * 5
                if(Math.ceil(hangSum) >= 5 && _this.text().length >= sum  ){
                    $(this).find('.mycomm_Up').show()
                }else{
                    $(this).find('.mycomm_Up').hide()
                }
            })
            // 展开收起
            $('.mycomm_Up').click(function(){
                if($(this).text() == '展开'){
                    $(this).text('收起')
                    $(this).siblings().removeClass('mycomm_text')
                    $(this).siblings().addClass('js_mycomm_text')
                }else{
                    $(this).text('展开')
                    $(this).siblings().removeClass('js_mycomm_text')
                    $(this).siblings().addClass('mycomm_text')
                }
            })
    
        })```