Question

我正在做的是一个动态的人物，例如，显示每个城市的天气。例如：

Answer 1

它并不需要任何简化，但如果将操作分成单独的步骤（使用函数），则可能更容易理解。

＆＃13;

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

＆＃13;

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

＆＃13;

试图简化JS文档

1 个答案: