Question

我的第一篇文章，所以对我很轻松！

我对编程非常陌生，而且我正在制作一个基于浏览器的应用程序，它将跟踪到达的航班（白天我是飞机机械师）并使用.effect（“突出显示”）使元素闪现时到达时间就在附近。这将显示在我们准备好的房间里的大显示器上。

并非所有代码都处于最后阶段。其中一些仍然只是为了测试函数是否有效，如下面的pulseRed和pulseYellow函数。我只在chrome中测试过这个，并且现在只打算用chrome运行它，所以不能保证它在其他浏览器中都能正常工作。

这是我的问题......

创建的每个新计时器都是具有唯一ID的新div。每个div包含几个span元素，用于在监视器上显示信息并存储数据。

如果你运行这段代码，那么标记为＃problem area＃的块应该提醒你到达目的地的值，它确实如此！成功！...有点问题。在第一个计时器之后，每次该功能触发时，都会将所有到达时间值绑定到一个窗口。因此，如果3个定时器具有05,08和12的值，则它将显示050812，并且由于在循环中每个定时器弹出一次窗口，它将执行3次。我要做的是让每个窗口显示div中ONE圈元素的信息。我假设我需要索引我所在循环的哪个元素，但我对[z]索引应该去的地方（如果这甚至是这里的修复）感到非常难过。一旦我可以从这些跨度中提取单个值，我可以设置其余的循环和语句来处理数据，我基本上完成了。

呼！很长的解释，但我想确保我的问题有道理。

$(document).ready(function() {
    var i = 01; //variable for iterating ID's for each timer below
    $("#startButton").fadeTo("fast",0.5);
    $("#startButton").mouseenter(function() {
        $("#startButton").fadeTo("slow",1);
    });
    $("#startButton").mouseleave(function() {
        $("#startButton").fadeTo("slow",0.5);
    });
    // pulse function causes the called object to blink red 3 times.
    var pulseRed = function() {
        $(".timers").effect("highlight", {color: 'red'}).fadeIn();
        $(".timers").effect("highlight", {color: 'red'}).fadeIn();
        $(".timers").effect("highlight", {color: 'red'}).fadeIn();
    }
    // pulse function to blink the target div yellow - currently pulses ALL div's for testing
    var pulseYellow = function() {
        $(".timers").effect("highlight").fadeIn();
        $(".timers").effect("highlight").fadeIn();
        $(".timers").effect("highlight").fadeIn();
    }
        setInterval(function(){ //set up just for testing purposes
        pulseYellow();
        pulseRed();
            for (var z = 1; z <= ($(".timers").length); z++) {
                alert($('div.timers span.arrivalHour').text()); //<---PROBLEM AREA!!!!!
            }
    },5000);    

//time data formatting for proper display
    var d = new Date();
    var currentHours = function() {
        var hourCheck = d.getHours();
            if (hourCheck <= 9) {
                return("0" + hourCheck);
        }
            else {
                return(hourCheck);
        }
    };
    var currentMinutes = function() {
        var minCheck = d.getMinutes();
            if (minCheck <= 9) {
                return("0" + minCheck);
        }
            else {
                return(minCheck);
        }
    };
//button to create the new timer and related functions. 
    $("#startButton").click(function() {
        var tailNumber = $("#tail").val();
        var borderColor = $("#colorPicker").val();
        var alertTime = $("#alert").val();
        var arrHour = $("#hour").val();
        var arrMinute = $("#minute").val();
        var remarks = $("#discrepancy").val();
    // example of similar code at  http://jsfiddle.net/nick_craver/TTHDQ/
    //creates a new div containing all of the user input data, iterates a new ID so that div's can be blinked individually
        $("<div />", { "class":"timers", id:"timer"+i})
            .append("<span class='tailNumber'>"+tailNumber +'  '+"</span><span class='arrivalHour'>"+arrHour+"</span><span>-</span><span class='arrivalMinute'>"+arrMinute+"</span><span class='table'>"+' ' +"</span><span class='remarks' style='margin: 0 auto; text-align: right'>"+remarks+"</span><div class='delete'>DELETE</div></div>")
            .appendTo("#main");
            $("#timer" + i).css('border', '2px solid ' +borderColor);   
        i++;

        //delete timer DIV's when no longer needed
        $(".delete").click(function() {
            $(this).closest(".timers").remove();            
        });
        $('#getTail').get(0).reset();
    }); 
});

编辑：添加HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Flight Timer</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body id="main">
            <div id="menu">
                <form id="getTail" action="">
                    Flight Tracker<br>
                    <input id="tail" type="text" name="Tail Number" placeholder="Tail #">
                    <select id="colorPicker">
                        <option value="Green">Color</option>
                        <option value="Red">Red</option>
                        <option value="Yellow">Yellow</option>
                        <option value="Green">Green</option>
                        <option value="Blue">Blue</option>
                        <option value="Orange">Orange</option>
                    </select>
                    <select id="alert">
                        <option value="default">Flash...</option>
                        <option value="1">1 minute prior</option>
                        <option value="5">5 minutes prior</option>
                        <option value="10">10 minutes prior</option>
                        <option value="15">15 minutes prior</option>
                    </select>
                    <input id="hour" type="text" name="hour" placeholder="Hour">
                    <br>
                    <input id="minute" type="text" name="minute" placeholder="Minute"> 
                    <input id="discrepancy" type="text" name="pirep" placeholder="Discrepancy or action">
            </form>
            <div id="startButton">
                Add Timer
            </div>
    </body>
</html>

Answer 1

如果我理解正确，您需要为每个计时器单独发出警报（由$('.timers')指定）。如果是这种情况，您希望将for语句切换为如下所示：

$("div.timers").each(function() {
    alert($(this).find('span.arrivalHour').text());
});

你得到所有文本的原因是$('div.timers span.arrivalHour')作为全局选择 - 意味着它将检索页面中的所有匹配元素。我提议的代码遍历每个计时器，检索每个计时器的到达时间。

访问<div> </div> </span>中的<span>文本

1 个答案: