Cleaner jQuery If Statementments

Question

Это беспорядок и не работает так, как планировалось. Прижав голову к стене. Должен быть более быстрый и чистый способ достичь этого, у меня есть 3 divs с тегом «p» в каждом. Если значения между определенной уставки, то я пытаюсь внедрить систему светофора путем замены IMG SRC в ...

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!

Answer 1

Я не проверял, но это должно работать:

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); 

Надеется, что это помогает.

Answer 2

.val() на р теге? http://api.jquery.com/val/. Я не думаю, что ты должен это сделать. Может, вы хотели использовать .text()? Прямая замена должна заставить его работать.

Что касается чистки немного, использовать некоторые функции:

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); 

я поместил setLights() внутри функции успеха, потому что мне кажется, имеет смысл. Если это не так, как вы этого хотели, попробуйте, где бы это ни было важно. И BTW, это непроверено. Если вы не можете разрешить какие-либо ошибки, сообщите мне, и я посмотрю, смогу ли я помочь.