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

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 ifs，您的代码会变得更加简单。

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