javascript - 我如何使用构造函数来编写这段代码？

Question

这是关于响应式设计中多个文本中的省略号。

我使用jQuery来做到这一点，但我认为编写这段代码会更容易，但我不知道该怎么做。我需要一些建议。

       if(responsive>1200 && responsive<1919){
            $(".ellipsis-2").each(function(){
                var maxwidth=15;
                if($(this).text().length > maxwidth){
                    $(this).text($(this).text().substring(0,maxwidth));
                    $(this).html($(this).html()+'...');
                }
                console.log($(this).text().length);
            });
            $(".ellipsis-3").each(function(){
                var maxwidth=40;
                if($(this).text().length > maxwidth){
                    $(this).text($(this).text().substring(0,maxwidth));
                    $(this).html($(this).html()+'...');
                }
                console.log($(this).text().length);
            });
        }else{
            $(".ellipsis-2").each(function(){
                var maxwidth=23;
                if($(this).text().length > maxwidth){
                    $(this).text($(this).text().substring(0,maxwidth));
                    $(this).html($(this).html()+'...');
                }
                console.log($(this).text().length);
            });
            $(".ellipsis-3").each(function(){
                var maxwidth=53;
                if($(this).text().length > maxwidth){
                    $(this).text($(this).text().substring(0,maxwidth));
                    $(this).html($(this).html()+'...');
                }
                console.log($(this).text().length);
            });
        }

Answer 1

您只需要一个函数来简化代码，而不是真正的构造函数。为省略号逻辑创建一个接收要应用的元素的选择器以及最大宽度的选择器:

function applyEllipsis(selector, maxWidth){
    $(selector).each(function(){
        if($(this).text().length > maxWidth){
            $(this).text($(this).text().substring(0,maxWidth));
            $(this).html($(this).html()+'...');
        }
        console.log($(this).text().length);
    });
}

现在您可以在 if 语句中调用它，传递每种情况所需的选择器和最大宽度:

if(responsive>1200 && responsive<1919){
    applyEllipsis(".ellipsis-2",15);
    applyEllipsis(".ellipsis-3",40);
}else{
    applyEllipsis(".ellipsis-2",23);
    applyEllipsis(".ellipsis-3",53);
}