Cleaner jQuery If Statements -
this mess , not work planned. banging head against wall. there must quicker , cleaner way achieve this, have 3 divs "p" tag in each. if values between setpoint i'm trying implement traffic light system 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!
i haven't tested this, 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 helps.
Comments
Post a Comment