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

但是因为我要更改为＆lt; 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 - 在较小的屏幕上删除表格中的部分文字

1 个答案: