簡化替換特定單詞的工作函數？

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

這是更加優化的w AY以任何方式：

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/

Answer 2

//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 3

下面的代碼：

<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 4

簡短而親切的版本使用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