JS文書を簡素化しようとしています

-1

私がやっていることは、例えば各都市の天気を示す、ダイナミックな人物です。JS文書を簡素化しようとしています

2017-05-04 Orel Kahlon

私はコードレビュースタックExchangeにこの質問を提出する推薦する：https://codereview.stackexchange.com/。 Stack Overflowは一般的なコードアドバイスではなく、バグに関する特定の質問に答えるためのものです。 – Hamms

@HammsこれはおそらくCRにとって十分ではありません。 https://codereview.meta.stackexchange.com/questions/5777/a-guide-to-code-review-for-stack-overflow-usersを参照してください – Barmar

それは私にはかなり簡単に見えます。あなたは 'for'ループを' $ .each（） 'に置き換えることができますが、改善のための他の機会はあまりありません。 – Barmar

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

出典

2017-05-04 20:10:36

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

出典

2017-05-04 20:35:33

私はこのフォーラムに合わない質問で助けようとしたので、 "-1"を得ましたか？ –

誰もがここで警察だと思っています。 –

JS文書を簡素化しようとしています

答えて

関連する問題