仅当屏幕调整到特定宽度时如何使用 JQuery 调用函数？答案

【问题标题】：How to Call a Function with JQuery Only When Screen Resizes to a Specific Width?仅当屏幕调整到特定宽度时如何使用 JQuery 调用函数？
【发布时间】：2018-01-20 10:43:03
【问题描述】：

我怎样才能让下面的这个函数只有在屏幕被调整到特定宽度时才被调用，比如媒体查询？（在这个演示中，特别是 600px 最大宽度。）

这是我到目前为止所开发的，但我一定做错了什么......

$(function() {
  if ($(window).screen.width <= 600) {
    $(".content").each(function(t) {
      len = $(this).text().length, len > 5 && $(this).text($(this).text().substr(0, 5) + "...")
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="content">CONDENSE THIS TEXT</span>

【问题讨论】：

您在window 之后缺少)
好的，谢谢。我刚刚将它添加到我的 sn-p 中。但似乎仍然没有工作。还有其他建议吗？
同时删除第一个});之后的冗余);
所以，我应用了这些编辑，但仍然无法让它正常工作。还有其他想法吗？

标签： javascript jquery html function media-queries

【解决方案1】：

添加window.onresize，它将捕获调整大小事件：

$(function() {
  window.onresize = function(event) {
    if (window.screen.width <= 600) {
      $(".content").each(function(t) {
        var len = $(this).text().length;
        if (len > 5) $(this).text($(this).text().slice(0, 5) + "...")
      });
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="content">CONDENSE THIS TEXT</span>

【讨论】：

您好，感谢您的回答。但是，它似乎并没有影响内容。另一位用户指出我要改写我原来的问题，以便进一步澄清，所以我正在寻找的解决方案与将屏幕大小调整为 600 像素的最大宽度时调用的函数有关。
该函数将在窗口大小调整时触发。我在控制台中试了一下，它按预期运行了......
好的。我已经尝试了您的确切代码，但是当屏幕的最大宽度为 600 像素时，我仍然看不到应用的功能。见这里：jsfiddle.net/bpyLjxom
用不同的方法解决了这个问题。感谢您的帮助。

【解决方案2】：

jQuery 没有screen 属性，请使用window.screen。请注意，使用逗号运算符将len 定义为, 后面的表达式的结果

$(function() {
  if (window.screen.width <= 600) {
    $(".content").each(function(t) {
      var len = $(this).text().length;
      if (len > 5) $(this).text($(this).text().slice(0, 5) + "...")
    });
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="content">CONDENSE THIS TEXT</span>

【讨论】：

感谢您的回答，但您的 sn-p 似乎不起作用，当调整为 600px 宽度时...它对您有用吗？
原问题没有提到“resized”，见stackoverflow.com/help/how-to-ask。 OP 的代码只使用了一次 if 条件。当视口改变尺寸时，使用resize 事件调度函数。

【解决方案3】：

找到解决办法：

function checkWidth() {
  if ($(window).width() < 600) {
    $('#content').addClass('fulltxt');
    $("#content").each(function(i) {
      len = $(this).text().length;
      if (len > 5) {
        $(this).text($(this).text().substr(0, 5) + '...');
      }
    })
  } else {
    $('#content').removeClass('fulltxt');
    $("#content").each(function(i) {
      $(this).text($(this).data('originaltxt'));
    });
  }
}
$("#content").each(function() {
  $(this).data({
    originaltxt: $(this).text()
  });
});
$(window).resize(checkWidth);

#content {
  border: 2px solid green;
  display: inline-block;
  padding: 5px;
}

#content.fulltxt {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content">CONDENSE THIS TEXT</div>

【讨论】：

【解决方案4】：

只需使用 jQuery width():

$(function() {
  if ($(window).width() <= 1000) {
    $(".content").each(function(t) {
      len = $(this).text().length, len > 5 && $(this).text($(this).text().substr(0, 5) + "...")
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="content">CONDENSE THIS TEXT</span>

【讨论】：

谢谢，但它仍然无法正常工作。您是否尝试过答案中的 sn-p？
是的，它可以工作 - 但屏幕宽度超过 600 像素。如果您在小屏幕或沙箱中运行它，它会压缩文本。为了演示，我将宽度更新为 1000px。