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);
}

Answer 2

根据此代码之后的其他内容，您可能会发现在将类/宽度值存储在对象数组中时会有一些用处：

var ellipsisData = [
    {
        className: 'ellipses-2',
        smallWidth: 15,
        bigWidth: 23
    },{
        className: 'ellipses-3',
        smallWidth: 23,
        bigWidth: 53
    }
]

然后像其他答案一样声明你的功能：

var truncateText = function(className, maxWidth) {
    $("." + className).each(function() {
        if($(this).text().length > maxWidth) {
            $(this).text($(this).text().substring(0,maxWidth));
            $(this).html($(this).html()+'...');
        }
        console.log($(this).text().length);
    });
};

现在决定您要使用的宽度：

var widthKey = (responsive > 1200 && responsive < 1919) ? 'smallWidth' : 'bigWidth';

最后遍历数据元素并在每个元素上执行函数：

ellipsisData.forEach(function(ellipsis) {
    truncateText(ellipsis.className, ellipsis[widthKey]);
});

可能不必要，但我已经把它写了，所以我想我会发布它。

如何使用构造函数编写此代码？

2 个答案: