如何避免在 jQuery 中使用以下代码中的 if else 循环

Question

请有人帮助如何删除重复的代码。

我有四个仪表板作为示例，我在这里提到了两个。

对于所有仪表板，相同的逻辑都适用，但是当我尝试使用 css 类根据条件应用 css 时，它不起作用。

所以，我使用了 id，它工作正常。

但我必须重复并写四次相同的条件。这使得 48 if 和 else 这一点都不好继续。请帮忙。

if(dashboard1!=null)
    {
    var status1 =$('#div-dashboard1. dashboard-table tbody tr:nth-child(2) td:nth-child(1)').text();
        var status2 =$('#div-dashboard1. dashboard-table tbody tr:nth-child(2) td:nth-child(2)').text();
        var status3 =$('#div-dashboard1. dashboard-table tbody tr:nth-child(4) td:nth-child(1)').text();
        var status4 =$('#div-dashboard1. dashboard-table tbody tr:nth-child(4) td:nth-child(2)').text();
        if(status1 ==minCount)
        {
            $('#div-dashboard1. dashboard-table tbody tr td #hlStatus1').addClass("div-circle-green1");
        }
        else if ((status1 > minCount) && (status1 <=avgCount))
        {
        $('#div-dashboard1. dashboard-table td #hlStatus1').addClass("div-circle-amber");       
        }
        else if (status1 >avgCount)
        {
        $('#div-dashboard1 .dashboard-table td #hlStatus1').addClass("div-circle_red1");
        }
        if(status2==minCount)
        {
            $('#div-dashboard1 .dashboard-table td #hlStatus2').addClass("div-circle-green1");
        }
        else if ((status2> minCount) && (status2<=avgCount))
        {
            $('#div-dashboard1.dashboard-table td #hlStatus2').addClass("div-circle-amber");        
        }
        else if (status2>avgCount)
        {
        $('#div-dashboard1.dashboard-table td #hlStatus2').addClass("div-circle_red1");
        }

if(status3==minCount)
        {
            $('#div-dashboard1 .dashboard-table tbody tr td #hlStatus3).addClass("div-circle-green1");
        }
        else if ((status3> minCount) && (status3<=avgCount))
        {
            $('#div-dashboard1 .dashboard-table tbody tr td #hlStatus3).addClass("div-circle-amber");       
        }
        else if (status3>avgCount)
        {
        $('#div-dashboard1 .dashboard-table td #hlStatus3').addClass("div-circle_red1");
        }

if(status4==minCount)
        {
            $('#div-dashboard1 .dashboard-table td #hlStatus4').addClass("div-circle-green1");
        }
        else if ((status4> minCount) && (status4<=avgCount))
        {
            $('#div-dashboard1 .dashboard-table td #hlStatus4').addClass("div-circle-amber");       
        }
        else if (status4>avgCount)
        {
        $('#div-dashboard1 .dashboard-table td #hlStatus4').addClass("div-circle_red1");
        }

    }
    if(dashboard2!=null)
    {
    var status1=$('#div-dashboard2 .dashboard-table tbody tr:nth-child(2) td:nth-child(1)').text();
        var status2=$('#div-dashboard2 .dashboard-table tbody tr:nth-child(2) td:nth-child(2)').text();
        var status3=$('#div-dashboard2 .dashboard-table tbody tr:nth-child(4) td:nth-child(1)').text();
        var status4=$('#div-dashboard2 .dashboard-table tbody tr:nth-child(4) td:nth-child(2)').text();
                if(status1 ==minCount)
        {
            $('#div-dashboard2 .dashboard-table td #hlStatus1').addClass("div-circle-green1");
        }
        else if ((status1 > minCount) && (status1 <=avgCount))
        {
            $('#div-dashboard2 .dashboard-table td #hlStatus1').addClass("div-circle-amber");       
        }
        else if (status1 >avgCount)
        {
        $('#div-dashboard2 .dashboard-table td #hlStatus1').addClass("div-circle_red1");
        }
        if(status2==minCount)
        {
            $('#div-dashboard2 .dashboard-table td #hlStatus2').addClass("div-circle-green1");
        }
        else if ((status2> minCount) && (status2<=avgCount))
        {
            $('#div-dashboard2 .dashboard-table td #hlStatus2').addClass("div-circle-amber");       
        }
        else if (status2>avgCount)
        {
        $('#div-dashboard2 .dashboard-table td #hlStatus2').addClass("div-circle_red1");
        }

if(status3==minCount)
        {
            $('#div-dashboard2 .dashboard-table td #hlStatus3').addClass("div-circle-green1");
        }
        else if ((status3> minCount) && (status3<=avgCount))
        {
            $('#div-dashboard2 .dashboard-table td #hlStatus3').addClass("div-circle-amber");       
        }
        else if (status3>avgCount)
        {
        $('#div-dashboard2 .dashboard-table td #hlStatus3').addClass("div-circle_red1");
        }

if(status4==minCount)
        {
            $('#div-dashboard2 .dashboard-table td #hlStatus4').addClass("div-circle-green1");
        }
        else if ((status4> minCount) && (status4<=avgCount))
        {
            $('#div-dashboard2 .dashboard-table td #hlStatus4').addClass("div-circle-amber");       
        }
        else if (status4>avgCount)
        {
        $('#div-dashboard2 .dashboard-table td #hlStatus4').addClass("div-circle_red1");
        }
    }

Answer 1

var dashboard = Array("#div-dashboard1","#div-dashboard2","#div-dashboard3", "#div-dashboard4");
var i;

for (i=0; i<dashboard.length; i++)
{
  if(dashboard[i]!=null)
  {
    var status1 =$(dashboard[i] + ' dashboard-table tbody tr:nth-child(2) td:nth-child(1)').text();
    var status2 =$(dashboard[i] + ' dashboard-table tbody tr:nth-child(2) td:nth-child(2)').text();
    var status3 =$(dashboard[i] + ' dashboard-table tbody tr:nth-child(4) td:nth-child(1)').text();
    var status4 =$(dashboard[i] + ' dashboard-table tbody tr:nth-child(4) td:nth-child(2)').text();
  }
}

希望你现在会有一个想法。。像这样只写一次你的其余代码

Answer 2

$( document ).ready(function() 
    {
        var minCount=0, avgCount=10,i,j;
        var dashboard = Array("#div-dashboard1","#div-dashboard2","#div-dashboard3", "#div-dashboard4");
        var statusID=Array("#hlStatus1","#hlStatus2","#hlStatus3","#hlStatus4");

    for (i=0; i<dashboard.length; i++)
    {
      if(dashboard[i]!=null)
      {
        var status1 =$(dashboard[i] + ' .dashboard-table tbody tr:nth-child(2) td:nth-child(1)').text();
        var status2 =$(dashboard[i] + ' .dashboard-table tbody tr:nth-child(2) td:nth-child(2)').text();
        var status3 =$(dashboard[i] + ' .dashboard-table tbody tr:nth-child(4) td:nth-child(1)').text();
        var status4 =$(dashboard[i] + ' .dashboard-table tbody tr:nth-child(4) td:nth-child(2)').text();
        var status=Array(status1,status2 ,status3 ,status4);
        for(j=0;j<status.length;j++)
        {
            if(status[j]==minCount)
            {
                $(dashboard[i] + ' .dashboard-table tbody tr td ' +statusID[j]).addClass("div-circle-green1");                          
            }
            else if ((status[j] > minCount) && (status[j] <=avgCount))
            {       
                $(dashboard[i] + ' .dashboard-table td ' +statusID[j]).addClass("div-circle-amber");                    
            }
            else if (status[j] >avgCount)
            {
                $(dashboard[i]  + ' .dashboard-table td ' +statusID[j]).addClass("div-circle_red1");                
            }
        }
      }
    }
    });