クリーナーjQuery ifステートメント

Question

これは混乱しており、計画どおりに動作しません。壁に向かって頭を打つ。これを達成するためには、より素早くクリーンな方法が必要です。私は3つのdivにそれぞれ "p"タグがあります。値は、特定の設定値の間にあるならば、私は

jQueryの... IMG SRCのを交換することにより、交通信号システムを実装しようとしています：

$(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を！ pタグに

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、これはテストされていません。エラーを解決できない場合は、教えてください。私が助けることができるかどうかがわかります。