Question

嘿朋友任何人请帮我解决这个问题。在这个javascript代码我从控制器获取2个数组ID数组和百分比数组并将它们转换为javascript数组现在我wana动态改变元素的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>

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

mvc3中的javascript代码洞察头

1 个答案: