Более чистый JQuery If Заявления

Question

Это беспорядок и не работает, как планировалось.Стучать головой о стену.Должен быть более быстрый и понятный способ добиться этого, у меня есть 3 деления с тэгом "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() на теге ap?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 () внутри функции успеха, потому что мнеэто, кажется, имеет смысл.Если это не так, как вы хотели, попробуйте там, где это уместно.И кстати, это не проверено.Если вы не можете устранить какие-либо ошибки, дайте мне знать, и я посмотрю, смогу ли я помочь.