jQuery - 小さな画面でテーブル内のテキストの一部を取り除く

Question

小さなデバイスでより簡単にフィットできるように、テーブル内のテキストの一部を省略するためにjQueryを作成しようとしています。私はこのようなものを試してみた：

jQuery(function($) { 
$(window).load(function() { 
    $(window).resize(function() { 
     if ($(window).width() < 480) { 
      $('td:contains("Hertford Hotshots")').text(function() { 
       return $(this).text().replace("Hertford Hotshots", "Hotshots"); 
      }); 
     } 
    }); 
}); 
}); 

しかし、私は理想的ではありません480PX以上のウィンドウを（私はページを更新する必要がある）サイズを変更する場合には、元の文字列に戻りません。

だから私は試してみました：

jQuery(function($) { 
$(window).load(function() { 
    $(window).resize(function() { 
     if ($(window).width() < 480) { 
      $('td:contains("Hertford Hotshots")').text(function() { 
       return $(this).text().replace("Hertford Hotshots", "Hotshots"); 
      }); 
     } 
     if ($(window).width() >= 480) { 
      $('td:contains("Hotshots")').text(function() { 
       return $(this).text().replace("Hotshots", "Hertford Hotshots FC"); 
      }); 
     } 
    }); 
}); 
}); 

をしかし、私は< 480PXでに変更していたテキストは、同じ単語（HotShotsの）が含まれているため、バックページをリサイズするとき、それは循環参照を作成しています！私が試すことができる何か他にありますか？ （たぶん追加しますか？）

ありがとうございました！

Answer 1

これはおそらく良いアイデアです

$(function() { 
    $(window).resize(function() { 
    $('td:contains("Hotshots")').text(function() { 
     return $(window).width() < 480?"Hotshots":"Hertford Hotshots"; 
    }); 
    }); 
}); 

をお試しください：

$(function() { 
    $(window).resize(function() { 
    $('.resizable').text(function() { 
     return $(window).width() < 480 ? 
     $(this).data("short") : 
     $(this).data("long"); 
    }); 
    }); 
}); 

と

<td class="resizable" data-short="Hotshots" data-long="Hertford Hotshots">Hertford Hotshots</td>