我的数据库中有一个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");
});
});
});
答案 0 :(得分:2)
试试这个(别介意语法更改 - 它只是为了提高可读性):
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
。无论哪种方式......