CODEWITHSUNDEEP
jqueryif-statement
benhowdle89
benhowdle89

Reputation: 37504

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!

alt text

Upvotes: 1

Views: 258

Answers (2)

Valentin Flachsel
Valentin Flachsel

Reputation: 10825

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.

Upvotes: 3

Nathan
Nathan

Reputation: 11159

.val() on a p tag? http://api.jquery.com/val/. I don't think you're supposed to do that. Maybe you meant to use .text()? A straight replace should make it work.

As for cleaning it up a bit, use some functions:

var getPhase = function (phaseNum) {
  $.get("db.php?phase="+phaseNum, function(data){ $("#phase" + phaseNum + " p").html(data); setLights(phaseNum); });
}

var setLights = function (phaseNum) {

  if ($("#phase" + phaseNum + " p").text() < 400){
    $("#phase" + phaseNum + "light").attr("src", "/phases/img/green.png");
  }
  else if ($("#phase" + phaseNum + " p").text() > 500){
    $("#phase" + phaseNum + "light").attr("src", "/phases/img/red.png");
  }
  else {
    $("#phase" + phaseNum + "light").attr("src", "/phases/img/amber.png");
  }
}

(var getAllPhases = function () {
  for (var i = 1; i < 3; i++) {
    getPhase(i);
  }
})(); // execute the function immediately

setInterval(getAllPhases, 6000);

I've put a setLights() inside the success function because to me that seems to make sense. If that's not the way you wanted it, try it wherever else is relevant. And BTW, this is untested. If you're not able to resolve any errors, let me know and I'll see if I can help.

Upvotes: 1

Related Questions