Question

我有一个功能，可以在标签换行时缩短某些单词（调整到各种分辨率）。我的功能正在运行，但我认为它可以简化......只是我不确定如何。当我在这里添加更多单词时，重复可能会快速失控。我可以将长字/短字放在一个数组中并一次性提供所有内容吗？我无法让小提琴工作（即使它正在处理我的项目），但是你走了。 http://jsfiddle.net/wucd1mws/1/提前致谢！

if ($('label').height() > 20) {
    alert('Text wrapped');

    var numtext = $('label:contains("Number")')
    if (numtext) {
        numtext.each(function () {
            $(this).html($(this).text().replace('Number', '#'));
        });
    }

    var pertext = $('label:contains("Percent")')
    if (pertext) {
        pertext.each(function () {
            $(this).html($(this).text().replace('Percent', '%'));
        });
    }

    var invtext = $('label:contains("Invoice")')
    if (invtext) {
        invtext.each(function () {
            $(this).html($(this).text().replace('Invoice', 'Inv'));
        });
    }

    // etc...
}

我认为这很可能是缩短功能的第一步......现在用长/短字对进行输入。

if ($('label').height() > 32) {
    var long = "Number";
    var short = "#";

    var labelwrap = $('label:contains('+ long +')')
    if (labelwrap) {
        labelwrap.each(function () {
            $(this).html($(this).text().replace(long, short));
        });
    }
}

Answer 1

//objects can be used for hash lookups in javascript
var replaceValues = {
    'percent': '%',
    'number': '#'
    //etc.
}

var html = $('label').html(); //get the html of your element
for (var index in replaceValues) {
    if (html.indexOf(index) != -1) { //check if substring is present
        html.replace(index, replaceValues[index]); //if so replace with alt value
    }
}

将其置于初始条件检查中。

编辑：旧浏览器没有String.prototype.indexOf，我写的替换过程区分大小写。

Answer 2

以下是代码：

<script type="text/javascript">
$(document).ready(function(){
    truncateLabels("label");
});

function truncateLabels(element){
    var element_max_height = 20;
    var arr = [];
    arr[0] = ["Number", "#"];
    arr[1] = ["Percent", "%"];
    arr[2] = ["Invoice", "Inv"];

    if($(element).length){
        if($(element).height() > element_max_height){
            for(var i=0; i<arr.length; i++){
                $(element + ':contains("' + arr[i][0] + '")').each(function(){
                    $(this).html($(this).text().replace(arr[i][0], arr[i][1], "gi"));
                });
            }
        }
    }
}
</script>

这适用于所有浏览器。

另外，我不明白为什么你依赖元素的高度。

如果要截断标签，可以使用以下库：trunk8

$(".truncate").trunk8({lines:1});
$(".truncate2").trunk8({lines:2});
$(".truncate3").trunk8({lines:3});

Answer 3

使用jQuery和一系列文本项的简短版本

var labelTextArr=[
    ['Number', '#'],
    ['Percent', '%'],
    ['Invoice', 'Inv']        
    ];
 var maxHt = 20

$.each(labelTextArr, function(i, arr){       
    $('label:contains('+arr[0]+')').html(function( _, html){       
        return $(this).height() > maxHt ? html.replace( arr[0], arr[1]) : html;
    });        
});

的 DEMO

Answer 4

这在任何方面都是更优化的方式：

var short_trans = {
    'Percent': '%',
    'Number': '#',
    'Invoice': 'Inv',
    'Amount': 'Amt',
    'Shipping': 'Ship',
    'Production': 'Prod',
    'Allocated': 'Alloc',
    'Complete': 'Comp',
    'Manager': 'Mgr'
}

$('label').each(function(){
    if ($(this).height() > 20) 
    {
        var words = $(this).text().split(' '); 
        for (var i in words)
        {
            if (short_trans[words[i]])
            {
                words[i] = short_trans[words[i]];
            }
        }

        $(this).text(words.join(' '));
    } 
});

我们曾为所有label代码循环，检查是否height > 20，然后将split文字转换成单词循环每个单词并检查缩短版本是否存在，如果是，则替换它

http://jsfiddle.net/wucd1mws/2/

简化工作功能以替换特定单词？

4 个答案: