Размер шрифта в облаке тегов Javascript переворачивается после 10 появлений

Question

Размер шрифта в облаке тегов Javascript переворачивается после 10 появлений

0

У меня есть строка JSON из моей БД, которая загружается в сценарий ниже, ваше основное облако тегов с увеличением размера шрифта на основе частоты. Моя проблема в том, что, как только частота достигает десяти (10), размер шрифта возвращается к тому же, как если бы он был одним. У меня были схожие проблемы, когда я передавал строку в PHP вместо INT, но здесь это не так.

{"tags":[{"tag":"programming","freq":11}]}

$(function() {

  $.getJSON("tagcloud.php", function(data) {

    $("<ul>").attr("id", "tagList").appendTo("#tagCloud");

    //create tags
    $.each(data.tags, function(i, val) {

      //create item
      var li = $("<li class=\"tagInfo\">");

      //create link
      $("<a>").text(val.tag).attr({class:"a",href:"index.php?page=tagdata&tagName=" + val.tag }).appendTo(li);

      /*If I set the first equation to more than what my frequency is (10000 here for caution), it works fine.  
      But the equation in the line commented out where '(val.freq / 10 < 1) is not
      giving me the correct output.  Am I missing ensuring this variable is an 
      INT in my JS after it retrieved in JSON? */
      li.children("a").css("fontSize", (val.freq / 10000 < 1) ? val.freq / 10 + 1 + "em": (val.freq / 10 > 2) ? "2em" : val.freq / 10 + "em");                       
      //li.children("a").css("fontSize", (val.freq / 10 < 1) ? val.freq / 10 + 1 + "em": (val.freq / 10 > 2) ? "2em" : val.freq / 10 + "em");                       

      //add to list
      li.appendTo("#tagList");
    });         
  });
});

dcclassics 24 апр. 2014, в 23:14

Источник

Теги:

javascript

jquery

json

1 ответ

Ещё вопросы

bartlb · Accepted Answer · 2014-04-24T20-52-00.000Z

Попробуйте это (не смотря на синтаксические изменения - это просто для чтения):

li.children("a").css("fontSize", 
    ((val.freq / 20) <= 1 ? (val.freq / 20) + 1 : 
     (val.freq / 10) >= 2 ? 2 : (val.freq / 10)) + "em");

Зачем...

В связи с началом использования менее < выражения, а не <=, ваш алгоритм сводит на нет 10/10, как истинный и заканчивается в "другом" сегменте вашего тройном заявления (возвращение 1em).

Другая проблема, с которой вы столкнулись, заключается в том, что вы ограничили себя очень небольшим диапазоном значений - в данном случае, размерами шрифтов. В настоящее время ваше уравнение приводит к следующему:

 divisor | frequency | product | size (em)
-------------------------------------------
    10        1          0.1       1.1
    10        2          0.2       1.2
    10        3          0.3       1.3
    10        4          0.4       1.4
    10        5          0.5       1.5
    10        6          0.6       1.6
    10        7          0.7       1.7
    10        8          0.8       1.8 
    10        9          0.9       1.9
    10        10         1.0       1.0 
    10        11         0.1       1.1
    10        12         0.2       1.2
    ...       ...        ...       ...

Вы можете решить проблему, чтобы она увеличивалась с 1.05em до 2em (с шагом .05em), просто меняя делитель с 10 на 20. Это поможет убедиться, что размер продолжает масштабироваться до тех пор, пока он не достигнет значения ваш порог, 2em.

Я бы предложил разметку некоторых ваших переменных, поскольку в настоящее время размер масштабируется для каждого 1 удара и останавливает масштабирование при 20 обращений. Знаете, 20 → 200, 10 → 100. Так или иначе...

Работает отлично! Благодарю. Я думаю, что в конечном итоге я их масштабирую, но у меня недостаточно контента, чтобы сделать его эффективным прямо сейчас. Я думаю, что в будущем я могу в конечном итоге сделать тренд вместо общего подсчета, поэтому, возможно, я тогда пересмотрю всю концепцию. Еще раз спасибо.