清潔jQuery如果語句

Question

這是一團糟，並沒有按計劃運行。撞在牆上。必須有一個更快，更乾淨的方式來實現這一點，我有3個div，每個都有一個「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

在p標籤.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（）成功函數中，因爲對我來說，似乎是有道理的。如果這不符合你的要求，請嘗試與其他任何相關的地方。順便說一下，這是未經測試的。如果您無法解決任何錯誤，請告訴我，我會看看我能否提供幫助。