Question

我有这个小脚本，我试图检测窗口大小以应用元素的caracters限制。

检测不起作用的问题。始终适用150的限制。

我设置了一个警报，看是否检测到，现在我确定他总是应用相同的。

有人可以帮助我找出这个脚本有什么问题吗？

这是我的代码：

$(function () {
        $(".block6 p").each(function (i) {
            len = $(this).text().length;
            if (len > 10) {
                if ($(window).width() <= 1280) {
                    $(this).text($(this).text().substr(0, 150) + '...');
                }
                else if ($(window).width() > 1280) {
                    $(this).text($(this).text().substr(0, 10) + '...');
                }
            }
        });
    });

Answer 1

您的代码仅在document.ready上运行一次。每次调整窗口大小时都需要运行测试：

    $(window).on('resize',function() {
        if ($(window).width() <= 1280) {
            $(".block6 p").each(function (i) {
                var len = $(this).text().length;
                if (len > 10) {
                    $(this).text($(this).text().substr(0, 150) + '...');
                }
            });
        } else { //if ($(window).width() > 1280) {
            $(".block6 p").each(function (i) {
                var len = $(this).text().length;
                if (len > 10) {
                    $(this).text($(this).text().substr(0, 10) + '...');
                }
            });
        }
    });

    $(document).ready(function() {
        $(window).trigger('resize');
    }

http://jsfiddle.net/mblase75/6PQ4Q/

也就是说，你有一个问题，就是你要直接改变每个元素的文本，所以通过调整浏览器大小来回切换将是破坏性的。我建议尽可能使用text-overflow: ellipsis。

Jquery - 检测窗口宽度

1 个答案: