我正在做的是一個動態的數字,例如,顯示每個城市的天氣。例如:試圖簡化JS文檔
Q
試圖簡化JS文檔
-1
A
回答
-1
它並不需要任何簡化,但如果將操作分成單獨的步驟(使用函數),可能會更容易遵循。
var weather = {
getTemps: function(){
return $("#in1").val().split(" ");
},
buildGraph: function(temps){
var a = 60, graph="", hi = 0;
for (var i=0; i<temps.length; i++) {
hi = temps[i] * 5;
graph += '<rect width="50px" class="grp" id="id' + temps.lengtg + '" height="' + hi + '" x="' + a + '" data-temp="' + temps[i] + '"/>';
a += 110;
}
return graph;
},
initMouseEvents: function(){
$("rect").mouseover(function (e) {
var x = e.pageX, y = e.pageY;
var temp = $(this).attr('data-temp');
$("#temp").text(temp + "c");
$("#temp").css("left", x + "px");
$("#temp").css("top", y-45 + "px").show();
}).mouseout(function() {
$("#temp").hide();
});
},
init: function(){
var temps = this.getTemps();
var graph = this.buildGraph(temps);
$("#svg1").html(graph);
this.initMouseEvents();
}
}
$(document).ready(function(){
weather.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="fg1">
<input type="hidden" value="70 80 35 20 110" id="in1" />
<figcaption> weather</figcaption>
<svg width="500px" height="230px" id="svg1" />
</figure>
-1
我覺得這是更接近你期望的結果。
重要的是,由於SVG幀的原因,'y'座標必須反轉。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (grp) {
updateSVG();
$("#update").click(function (e) {
updateSVG();
e.preventDefault();
});
$(document.body).on('mouseover','svg .temp', function() {
var id = $(this).attr("data-index");
var temp = $(this).attr("data-temp") + "C";
$("#text-" + id).html(temp).show();
});
$(document.body).on('mouseout','svg .temp', function() {
var id= $(this).attr("data-index");
$("#text-" + id).hide();
});
function updateSVG() {
$("#svg1").html("");
var temps = $("#in1").val().split(" ");
var content = "";
for (var i in temps) {
var temp = temps[i];
var x = i * 110;
var y = (230 - temp);
var elem = '<rect style="fill:rgb(0,0,200)" class="temp" width="50px" class="grp" id="id' + i + '" height="' + (temp) + '" x="' + x + '" y="' + y + '" data-index="' + i + '" data-temp="' + temp + '"/>';
var text = '<text style="display:none;" id="text-' + i + '" x="' + x + '" y="' + (y - 20) + '" font-family="Verdana" font-size="15">Hello, out there</text>';
content += elem + text;
}
$("#svg1").html(content);
}
});
</script>
</head>
<body>
<figure id="fg1">
<label>Type here the temperatures</label>
<input id="in1" type="text" value="70 80 35 20 110" />
<button id="update">Update graph</button>
<figcaption> weather</figcaption>
<svg width="500px" height="230px" id="svg1" />
</figure>
</body>
</html>
+0
所以我得到一個「-1」,因爲我試圖幫助一個不適合這個論壇的問題? –
+0
每個人都認爲他們是這裏的警察,不要讓它打擾你。 –
相關問題
- 1. HTML/JS簡化
- 2. 試圖簡化MySQL查詢
- 3. 試圖簡化路由
- 4. 簡化JS代碼
- 5. 簡化類文檔字符串
- 6. 調試一個簡單的jQuery文檔
- 7. 文檔圖像二值化
- 8. 試圖添加一個div到使用香草js的文檔
- 9. 試圖更新文檔
- 10. 如何簡化這個js?
- 11. 簡化我的JS代碼
- 12. 試圖避免重複,簡化...創建全局變量,並簡化我的JavaScript - 純js沒有jquery
- 13. 試圖簡化這個javascript函數
- 14. 試圖瞭解如何簡化jquery
- 15. 試圖簡化一些JavaScript與封閉
- 16. 試圖簡化JavaScript中的公式
- 17. 鬥爭試圖簡化代碼
- 18. 試圖簡化更新代碼
- 19. HTML文檔+ js +圖片大小(kb)
- 20. 卡住試圖抽象的東西,我試圖過度簡化?
- 21. 我試圖用JMSSerizial Bundle序列化嵌入式MongoDB文檔
- 22. 試圖將文件寫入Excel文檔
- 23. Matplotlib圖 - 簡化
- 24. 錯誤當試圖解析apache文檔中的文檔
- 25. 試圖獲取包含嵌套文檔的文檔
- 26. 壓縮數字化文檔圖像
- 27. 簡單的圖像庫JS
- 28. 錯誤當試圖從DOM文檔
- 29. 試圖閱讀MS Office文檔
- 30. 試圖在UIView文檔中查找UIAccessibility
我會建議提交這個問題的代碼審查堆棧交易所:https://codereview.stackexchange.com/。堆棧溢出用於回答有關錯誤的特定問題,而不是用於一般代碼建議 – Hamms
@Hamms對於CR,這可能不夠完整。閱讀https://codereview.meta.stackexchange.com/questions/5777/a-guide-to-code-review-for-stack-overflow-users – Barmar
它看起來很簡單。你可以用'$ .each()'代替'for'循環,但是我沒有看到很多改進的機會。 – Barmar