Как писать отзывчивый текст для различных размеров экрана

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  
} 

Я не думаю, что это наиболее эффективный (и грязный код) - I думаю, что должен быть способ, чтобы сделать его проще - Давайте предположим, что я могу написать этот объект, который хранит все данные:

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) 
} 

спасибо, Alon

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]); 
    } 
}