Question

我的数据库中有一个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's 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");
    });         
  });
});

Answer 1

试试这个（别介意语法更改 - 它只是为了提高可读性）：

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

为什么...

由于最初使用小于<表达式而不是<=，您的算法会将10 / 10否定为真，最终会在＆＃34; else＆＃34;你的三元语句的一部分（返回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
    ...       ...        ...       ...

您可以通过简单地将除数从10更改为20来解决此问题，使其从1.05em扩展到2em（增量为.05em）。将有助于确保尺寸保持缩放，直到达到您的阈值2em。

我建议将一些变量标记为当前每1 点击的大小，并停止缩放20 点击。你知道，20 -> 200, 10 -> 100。无论哪种方式......

Javascript标签云字体大小在10次出现后翻滚

1 个答案: