Question

如果我想制作自适应文本，我可能会写出类似的内容：

$(window).resize(function ()
{
      if $(document).width() <= 320) {
      $('#mydiv').html('something')
      }
      if $((document).width() > 320) && (document).width() <= 480)) {
      $('#mydiv').html('something longer')
      }    
      if $((document).width() > 480) && (document).width() <= 768)) {    

      }   
      //and so on     
}

我认为它不是最有效的（和杂乱的代码） - 我认为必须有一种方法可以让它变得更容易 - 让我们假设我可以编写这个存储所有数据的对象：

    var divTextPerScreenWidthMap = {
       {'360','click'},
       {'480','click it'},
       {'768','click it right'},
       {'1024','you know you want to click it'},
       {'1280','click this button which is very long will help you'}
    }

在我这样做之后，是否有一个我可以编写的简单函数来获取这些数据并简化我的多条件函数？某种方式告诉javascript如何构建我需要的特定功能？

类似这样的东西，但在实际代码中：

for (objects in divTextPerScreenWidthMap) {
    create If Statement for Nth Object(object)
}

感谢，阿龙

Answer 1

我认为使用像这样的查找表有点矫枉过正。请注意，如果正确使用else if，您的代码会变得更加简单。

if $(document).width() <= 320) {
    $('#mydiv').html('something')
} else if ($(document).width() <= 480) {
    $('#mydiv').html('something longer')
} else if ($(document).width() <= 768) {    
    ...
}

Answer 2

这样的东西应该可以工作 - 它会为第一个屏幕宽度（360）设置一次，然后为每个后续屏幕宽度设置一次，如果宽度小于文档的宽度，它将覆盖它。

var docWidth = $(document).width();
for (var i in divTextPerScreenWidthMap)
{
    if (parseInt(divTextPerScreenWidthMap[i][0]) < docWidth || i == 0)
    {
        // Set something here
        console.log( divTextPerScreenWidthMap[i][1] );
    }
}

如何为不同的屏幕尺寸编写响应式文本

2 个答案: