Question

如果屏幕尺寸减小，我有一个代码试图更改h1的文本，这是我的实际代码，但是没有用。有人可以帮我纠正它并理解它吗？谢谢！

HTML

if($(window).width() <= 500){
$('#text1').Text('testing');  
}else{
$('#text1').Text('buuu');
}

JAVASCRIPT

       var format = [];
       var formats = [];



        var length = result.formats.length - 1;
        for (var i = 0 ; i <= length; i++) {
          var type = result.formats[i].type;
          var type2 = type.split(/[;,]/);

              var typee = type2[0];
               var resolutions = result.formats[i].resolution;
               var urls = result.formats[i].url;


                format.push({
                  "Type": typee,
                  "resolution": resolutions
                  // "url": urls
                })


        };



        var formatt = JSON.stringify(format, null, 4);
        Session.set('format', JSON.stringify(format, null, 4));
        console.log(formatt);

Answer 1

您需要与[31] resize事件一起工作。其他选项是使用CSS伪代码。

＆＃13;

window

＆＃13;

@media (min-width: 500px) {
  #text1:after {
    content: "foo";
  }
}
@media (max-width: 499px) {
  #text1:after {
    content: "bar";
  }
}

＆＃13;

已修改根据<h1 id="text1"></h1>建议。

＆＃13;

Niet the Dark Absol

＆＃13;

@media (min-width: 500px) {
  #text1 > .tiny {
    display: none;
  }
}
@media (max-width: 499px) {
  #text1 > .big {
    display: none;
  }
}

＆＃13;

Answer 2

也许CSS可以帮到你：

使用data-属性来验证HTML5和媒体查询以显示其值。用于擦除屏幕文本的旧文本缩进方法保留在标记本身中。

您可以在没有id或class的情况下使用整个网站，但data-属性需要在那里填充，否则需要class来设置，或id一次性使用。

＆＃13;

 @media all and (max-width:500px) { 
  h1 {
    text-indent:-9999px;
  }
  h1:before {
    content:attr(data-text);
    text-indent:0;
    float:left;
  }
}

＆＃13;

<h1 data-text="short text">My long text stands here</h1>

＆＃13;

Answer 3

你必须抓住窗口的调整大小事件。使用jquery非常容易。试试这个：

$(window).resize(function(){
    if ($(window).width() <= 500){
        $('#text1').Text('testing');  
    }
    else {
        $('#text1').Text('buuu');
    }
});

http://jsbin.com/puzanajepe/1/edit?html,js,output

如果屏幕缩小，请更改<h1>的文本

3 个答案: