0

ちょっと友達誰かがこの問題のために私を助けてください。このjavascriptコードでは、コントローラーから2つの配列ID配列とパーセンテージ配列を取得し、それらをjavascript配列に変換します。要素のcssプロパティを動的に変更しますが、成功する必要があります。このコードのエラーを教えてください 

@section javascript{
        <script  type="text/javascript">
         $(document).ready(function() {
                @{
                    string data = "";
                    int length = ViewBag.length;
            }

              var percent = new Array();
            @for (int j = 0; j < length; j++)
            {
                data += "percent[" + j + "]=\"" + ViewBag.percentage[j] + "\";";
            }         
             @MvcHtmlString.Create(data);  
              var ids = new Array();
            @for (int i = 0; i < length; i++)
            {   
                data += "ids[" + i + "]=\"" + ViewBag.IDs[i] + "\";";
            }   
              @MvcHtmlString.Create(data);
             //get current date day for javascript
            var date  = new Date();
            var day = date.getDay();
            var dayper = (day/30)*100;
            //**************************************************************//
            //Remaining amount in percentage variable as percent[i] is spend//
            //amount percentage so subtracting spend percentage from 100 wil//
            // return remaing amount percentage                             //
            //**************************************************************//
            var rA;
            var per;
            var id;
             for(var k = 0;k<ids.length;k++)
             {
                per = percent[k];
                id  = ids[k];
                document.getElementById(id).style.width = parseInt(per)+"%";
                rA = 100 - parseInt(percent[k]);
                if(rA - dayper > 40)
                {
                    document.getElementById(id).style.background = "red";
                }
                else if((rA - dayper)>20 && (rA - dayper) < 40)
                {
                    document.getElementById(id).style.background = "yellow";
                }           
                else
                document.getElementById(id).style.background = "green";
             }            
          });


        </script>
4

1 に答える 1

1

あなたが示したのは、サーバー側とクライアント側のコードの絶対に恐ろしい混合物です。申し訳ありませんが、それは忌まわしいコードです。それらの懸念を分離してください。また、あなたはすでにjQueryを使用しているように見えるので、なぜそれを利用していないのか、90年代のjavascriptコードを書いているのかについての合理的な説明を見つけることができません.

それでは、これを改善する方法を見てみましょう。

@section javascript {
    <script type="text/javascript">
        $(document).ready(function() {
            var percents = @Html.Raw(Json.Encode(ViewBag.percentage));
            var ids = @Html.Raw(Json.Encode(ViewBag.IDs));

            var date  = new Date();
            var day = date.getDay();
            var dayper = (day / 30) * 100;

            $.each(ids, function(index, id) {
                var percent = parseInt(percents[index], 10);
                var element = $('#' + id);
                element.css('width', percent + '%');
                var rA = 100 - percent;
                var color = 'green';

                if (rA - dayper > 40) {
                    color = 'red';
                } else if (rA - dayper > 20 && rA - dayper < 40) {
                    color = 'yellow';
                }

                element.css('background-color', color);
            });
        });
    </script>
}
于 2012-06-28T07:35:15.390 に答える