Cleaner jQuery If Statements

This is a mess and does not work as planned. Banging head against wall. There must be a quicker and cleaner way to achieve this, i have 3 divs all with a "p" tag in each. If the values are between certain setpoint then i'm trying to implement a traffic light system by swapping img src's...

jQuery:

$(document).ready(function() {
                    $.get("db.php?phase=1", function(data){ $("#phase1 p").html(data); });
                    $.get("db.php?phase=2", function(data){ $("#phase2 p").html(data); });
                    $.get("db.php?phase=3", function(data){ $("#phase3 p").html(data); });
                    $.get("db.php?tstamp=1", function(data){ $("#tstamp p").html(data); });
            setInterval(function() {
                    $.get("db.php?phase=1", function(data){ $("#phase1 p").html(data); });
                    $.get("db.php?phase=2", function(data){ $("#phase2 p").html(data); });
                    $.get("db.php?phase=3", function(data){ $("#phase3 p").html(data); });
                    $.get("db.php?tstamp=1", function(data){ $("#tstamp p").html(data); });
            }, 60000);
            if ($("#phase1 p").val() < 400){
                    $("#phase1light").attr("src", "/phases/img/green.png");
            }
            else if (($("#phase1 p").val() > 400 && $("#phase1 p").val() < 500)){
                    $("#phase1light").attr("src", "/phases/img/amber.png");
            }
            else if ($("#phase1 p").val() > 500){
                    $("#phase1light").attr("src", "/phases/img/red.png");
            };
            if ($("#phase2 p").val() < 400){
                    $("#phase2light").attr("src", "/phases/img/green.png");
            }
            else if (($("#phase2 p").val() > 400 && $("#phase2 p").val() < 500)){
                    $("#phase2light").attr("src", "/phases/img/amber.png");
            }
            else if ($("#phase2 p").val() > 500){
                    $("#phase2light").attr("src", "/phases/img/red.png");
            };
            if ($("#phase3 p").val() < 400){
                    $("#phase3light").attr("src", "/phases/img/green.png");
            }
            else if (($("#phase3 p").val() > 400 && $("#phase2 p").val() < 500)){
                    $("#phase3light").attr("src", "/phases/img/amber.png");
            }
            else if ($("#phase3 p").val() > 500){
                    $("#phase3light").attr("src", "/phases/img/red.png");
            };
        });

HTML:

<div id="phase1">
            <p class="results"></p>
            <img id="phase1light" src="/phases/img/red.png" />
        </div>
        <div id="phase2">
            <p class="results"></p>
            <img id="phase1light" src="/phases/img/red.png" />
        </div>
        <div id="phase3">
            <p class="results"></p>
            <img id="phase1light" src="/phases/img/red.png" />
        </div>      

HELP!

Answers


I haven't tested this, but it should work:

phasePath = '/phases/img/';

(function getTheData() {
    $.get("db.php?tstamp=1", function(data){ $("#tstamp p").html(data); });

    $("div[id^=phase]").each(function() {
        var phaseId = $(this).attr('id').substr(5);

        $.get("db.php?phase=" + phaseId, function(data){
            var phaseVal = data;

            if(phaseVal >= 500) {
                var phaseImg = 'red.png';
            } else {
                if(phaseVal >= 400) {
                    var phaseImg = 'amber.png';
                } else {
                    var phaseImg = 'green.png';
                }
            }

            $("p", this).html(data);
            $("img", this).attr("src", phasePath + phaseImg);
        });
    });
})();

setInterval(getTheData, 6000);

Hope this helps.


Need Your Help

Google Maps API v3: Radius parameter doesn't seem to limit autocomplete results

javascript html google-maps google-maps-api-3 maps

I'm trying to limit autocomplete results to a city by setting a country through componentRestrictions and a radius through radius, as explained here:

Print unicode character

bash printf

With Bash, you can use printf with hex codes

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.