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

Try

$(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>