Question

我有一个正确填充元素列表的对象，当我点击其中一个元素时，我试图从该对象获取特定数据。现在它无论我在哪里点击都只返回最后一个对象项。我能得到正确的数据吗？

var Alerts = {
        apu: [["APU Power Fail", "APU[1]"], ["APU Power Fault", "APU[2]"], ["APU Generator Fail", "APU[3]"], ["APU High Oil Temperature", "APU[4]"], ["APU Hot Start", "APU[5]"], ["APU Loss Overspeed Protection", "APU[6]"], ["APU Starter Engaged", "APU[7]"], ["APU Fire", "APU[8]"], ["APU Fails Bite Check", "APU[9]"], ["APU Door Fails to Open", "APU[10]"], ["APU No Flame", "APU[11]"], ["Left Fire Bottle Discharge", "APU[12]"]],

        avionics: [["ADS 1 Fail", "AVIONICS[1]"], ["ADS 2 Fail", "AVIONICS[2]"], ["ADS 3 Fail", "AVIONICS[3]"], ["AP 1 Fail", "AVIONICS[4]"], ["AP 2 Fail", "AVIONICS[5]"], ["Autopilots Fail", "AVIONICS[6]"], ["Baroset 1 Fail", "AVIONICS[7]"], ["Baroset 2 Fail", "AVIONICS[8]"], ["Baroset 3 Fail", "AVIONICS[9]"], ["CCD 1 Fail", "AVIONICS[10]"], ["CCD  2 Fail", "AVIONICS[11]"], ["Heading Comparison Monitor", "AVIONICS[12]"], ["Heading and Roll Comparison Monitor", "AVIONICS[13]"], ["Display Controller 1 Fail", "AVIONICS[14]"], ["Display Controller 2 Fail", "AVIONICS[15]"], ["IRS 1 Fail", "AVIONICS[16]"], ["IRS 2 Fail", "AVIONICS[17]"], ["IRS 3 Fail", "AVIONICS[18]"], ["Glideslope Antenna Fail", "AVIONICS[19]"], ["MAU 1A Fail", "AVIONICS[20]"], ["MAU 1B Fail", "AVIONICS[21]"], ["MAU 2A Fail", "AVIONICS[22]"], ["MAU 2B Fail", "AVIONICS[23]"], ["MAU 3A Fail", "AVIONICS[24]"], ["MAU 3B Fail", "AVIONICS[25]"], ["MRC 1 Fail", "AVIONICS[26]"], ["MRC 2 Fail", "AVIONICS[27]"], ["GPS Degrade", "AVIONICS[28]"], ["GPS #1 Fail", "AVIONICS[28]"], ["GPS #2 Fail", "AVIONICS[30]"], ["Display Unit 1 Fail", "AVIONICS[31]"], ["Display Unit 2 Fail", "AVIONICS[32]"], ["Display Unit 3 Fail", "AVIONICS[33]"], ["Display Unit 4 Fail", "AVIONICS[34]"], ["GPS - Unable RNP", "AVIONICS[35]"]]
    }
    var description, breaker;
    for(var key in Alerts){
        var system = key.toUpperCase();
        $("#systems").append("<div class='systems' id='" +key +"'><div class='select_box'></div><h2>" +system +"</h2></div>");
    }
    $("#systems").on("click", ".systems", function(){
        $("#malfunctions").children().remove();
        $(this).find(".select_box").each(function(){
            $(".selected").removeClass("selected");
            $(this).addClass("selected");
        })
        $.each(Alerts[this.id], function(ind,item){
            breaker = item[1];
            $("#malfunctions").append("<div class='systems'><div class='select_box'></div><p>" +item[0] +"</p></div>");
        })
    })
    $("#malfunctions").on("click", ".systems", function(){
        var id = $(this).text();
        console.log(id);
        console.log(breaker);
        $(this).find(".select_box").each(function(){
            if($(this).hasClass("selected")){
                $(this).removeClass("selected");
            }
            else{
                $(this).addClass("selected");
            }
        })
    })

Answer 1

试试这个解决方案：javascript允许创建IIFE功能:) ...

 for(var key in Alerts){
        var system = key.toUpperCase();
        (function(key,system ){
             $("#systems").append("<div class='systems' id='" +key +"'><div class='select_box'></div><h2>" +system +"</h2></div>");
             $("#"+key).on("click",function(){
                   alert(key);
             });
        })(key,system );
    }

这个例子。你应该在代码中使用它吗:)

jQuery：在单击元素时尝试获取对象数据

1 个答案: