2017-03-14 12 views
0

私のサイトにはタイトルを持つdiv要素がいくつかあります。ウィンドウのサイズを変更するときにタイトルが改行される可能性があります。要素のスライスとスライスタイトルのサイズ変更

私はそれを避けたいと思いますが、私が問題になるのは、タイトルをスライスして短いタイトルをタグに入力すると、期待どおりに動作するということです。今、大きな要素にウインドウのサイズを変更すると、短いタイトルが表示されます。どのように基本的に前後に切り替えることができますか?

これは現在使用しているコードで、各タイトルの長さを調べ、27文字を超える場合はそれをスライスします。コードは以下の通りである:

new ResizeSensor($('#col1'), function(){ 
    if($('#col1').width() >= 330) { 
     $('.stats').show(); 

     // how could I check here if the title was sliced and then unslice it?    

    } 
    else { 
     var titles = []; 
     var lengths = []; 

     $('.title-header').each(function() { 
      var title = $(this).text(); 
      var length = $(this).text().length; 

      titles.push(title); 
      lengths.push(length); 
     }); 

     for (var x = 0, len = titles.length; x < len; x++) { 
      if (lengths[x] > 27) { 
       var newTitle = titles[x].slice(0, -9); 
       var oldTitle = $("#col" + x).find(".title-header").text(); 

       $("#col"+x).find(".title-header").text(newTitle + "..."); 
      } 
     } 

     $('.stats').hide(); 
    } 
}); 

私はローカルストレージを使用し、タイトルを保存し、それらに要素のサイズが変更されるたびに使用することができることを承知しています。しかし私は、私が思考していない、または知らない簡単な方法があるかどうか疑問に思っています。どんな助けもありがとうございます。私は私の脳を望む

答えて

0

非常に簡単な答えはかなり早い時期に、ずっと見ていた:前後にサイズ変更時

ただ、実際にリサイズ前の配列を保存するために必要な
var titles = []; 
var lengths = []; 

$('.title-header').each(function() { 
    var title = $(this).text(); 
    var length = $(this).text().length; 

    console.log('title is '+title); 
    titles.push(title); 
    lengths.push(length); 
}); 

new ResizeSensor($('#col1'), function(){ 
    if($('#col1').width() >= 330) { 
     for (var x = 0, len = titles.length; x < len; x++) { 
      if (lengths[x] <= 33) { 
       var newTitle = titles[x]; 

       $("#col"+x).find(".title-header").text(newTitle); 
      } 
     } 

     $('.stats').show(); 
    } 
    else { 
     for (var x = 0, len = titles.length; x < len; x++) { 
      if (lengths[x] > 27) { 
       var newTitle = titles[x].slice(0, -9); 

       $("#col"+x).find(".title-header").text(newTitle + "..."); 
      } 
     } 

     $('.stats').hide(); 
    } 
}); 

はそう、彼らが利用可能です。

関連する問題