javascript - 使用 JS 和 jQuery 的响应式文本

Question

我正在尝试在我的网站上设置一个简单的标题，如果窗口缩放或加载到低于某个 px 宽度，则将其中的文本更改为更短，然后如果再次缩放得更大，则会弹回到原始 HTML再次。然而，由于某种原因，这被证明是非常困难的。

现在我有:

<script>
if ( $(window).width() > 480) {    
    $(".title").html("<a class='title' href='/'>LONGTEXTLONGTEXT</a>");
}
</script>

<script>
window.addEventListener('resize', function(event){
    if ( $(window).width() < 480) {    
        $(".title").html("<a class='title' href='/'>SHORTTEXT</a>");
    }
});
</script>

但由于某种原因，它根本就失败了。

有什么想法吗？

Answer 1

正如建议的，最好在没有 JavaScript 的情况下使用 CSS 媒体查询(并且不只是更改字体大小)来完成此操作。

将长短标题链接放在页面上，并根据宽度显示/隐藏它们:

div.title { background-color:#ff0; border-bottom:1px solid #000; }

/* this is for anything less than 480px */    
.title > .title { display:none; }
.title > .titlesmall { display:initial; }

/* greater than 480px */
@media screen and (min-width: 480px){
  .title > .title { display:initial; }
  .title > .titlesmall { display:none; }
}

<div class="title">
  <a class='title' href='/'>Some really long title</a>
  <a class='titlesmall' href='/'>CD</a>
</div>

或者修复语法错误，最好也使用 jQuery 来监听 resize 事件，也应该足够好:

<div class="title">
  <a class='title' href='/'>Some really long title</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  if ($(window).width() < 480) {
    $(".title").html("<a class='title' href='/'>CD</a>");
  }
</script>

<script>
  $(window).on('resize', function(event) {
    if ($(window).width() < 480) {
      $(".title").html("<a class='title' href='/'>CD</a>");
    }
  });
</script>