jQuery

Question

我正在尝试创建 jQuery 以在 table 中缩写我的文本的一部分，以便它更容易适合较小的设备。我试过这样的事情：

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");
            });
        }
    });
});
});

但是当我将 window 的大小调整到超过 480 像素（我必须刷新页面）时，它并没有恢复到原来的字符串，这并不理想。

所以我试过了：

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>

jQuery - 在较小的屏幕上删除 table 中的部分文本

jQuery - removing part of text in table on smaller screens

replace

circular-reference