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！

alt text

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（），因为对我来说似乎有意义。如果那不是您想要的方式，请在相关的任何地方尝试。顺便说一下，这是未经测试的。如果您无法解决任何错误，请告诉我，我会看看是否可以提供帮助。

清洁jQuery如果声明

2 个答案: