javascript - 只能显示最后创建的对象的信息 |覆盖以前的

Question

我有一个可以创建一些“房子”和“人”的系统。对我来说，下一步是我想显示有关我点击的房子的一些信息。但是，我只能访问有关最后创建的房屋的信息，而无法访问我单击的房屋的信息。

请参阅此处的图片:

右边的房子是我创建的最后一个房子。信息显示正确。但如果我点击第一个房子(左边的那个)，我的信息不会改变。

我创建了一个JSFIDDLE在这里我们可以亲自尝试一下。

我猜我的问题出在 objHouse.click(function() 中的某个地方。我尝试了几种不同的方法。现在我尝试像这样定位它:

$('#BtnCreateHouse').click(function(){
oHouse = CreateHouseInMemory();
CreateHouseInLayout(oHouse);


});

function CreateHouseInMemory()
{
var oHouse = 
{
    "id":   "H"+GetRandomNumber(999, 999999999999),
    "StreetMame": $('#StreetName').val(),
    "Number": $('#Number').val(),
    "MaxPeople" : $('#MaxPeople select').val(),
    "aPeople": []
}
aHouses.push(oHouse);
console.log(oHouse); 
return oHouse;  
}

function CreateHouseInLayout()
// See JSFIDDLE, to much code to be posted here.


var objHouse = $('#' + oHouse.id)

objHouse.click(function(){
    $("#WindowDisplayHouseInfo").show();                            
    $('#ShowId').text("ID: " + oHouse.id);
    $('#ShowStreetName').text("Street Name: " + oHouse.StreetMame);
    $('#ShowNumber').text("Number: " + oHouse.Number);
    $('#ShowMaxInhabitants').text("Max inhabitants: " + oHouse.MaxPeople);

    for(var i = 0; i < oHouse.aPeople.length; i++)
    {
    $('#ShowInhabitants').html("<br />" + "Inhabitant: " + oHouse.aPeople.length 
                               +"<br />" + "ID: " + oHouse.aPeople[i].id
                               +"<br />" + "Name: " + oHouse.aPeople[i].Name
                               +"<br />" + "Last Name: " + oHouse.aPeople[i].Lastname
                               +"<br />" + "Age: " + oHouse.aPeople[i].Age
                               +"<br />" + "Gender: " + oHouse.aPeople[i].sGender
                               );
    }   

        $('.DeleteHouse').click(function()
        {
            $(objHouse).children().each(function(){
                $(this).appendTo($('#City')).css({"top":"" , "left":""});
            });

            $(objHouse).remove();                  
            $("#WindowDisplayHouseInfo").hide();
        });
}); 

我真的希望你们中的一个人能告诉我我做错了什么。我已经被困了好几个小时了。

更新

我发现如果我改变:

objHouse.click(function(){ 

到

$('.House').click(function(){ 

然后更改

$('#ShowId').text("ID: " + oHouse.id)

至

$('#ShowId').text("ID: " + this.id);

然后它将适用于 ID，但如果我 fx. write("街道名称:"+ this.StreetName);那么就不行了。知道为什么吗？

在此处更新了 JSFIDDLE:http://jsfiddle.net/Adnaves/pcVR6/2/

Answer 1

内部:

$('#BtnCreateHouse').click(function(){
oHouse = CreateHouseInMemory();
CreateHouseInLayout(oHouse);
});

您没有在函数作用域中定义 oHouse var，并且稍后在 CreateHouseInLayout 函数中您不使用传递的参数，而是使用之前的全局变量。因此，单击函数会在全局符号表中创建一个 oHouse 变量，稍后可以通过 CreateHourseInLayout 访问该变量，第一次可以正常工作，但第二次单击时，您将覆盖全局变量，并且第一个 house == 第二个 house房子。您需要做的是正确确定变量的范围:

$('#BtnCreateHouse').click(function(){
   var oHouse = CreateHouseInMemory(); // Create the house var locally and pass it to the other function
   CreateHouseInLayout(oHouse);
});

function CreateHouseInMemory() {
   var oHouse = {
    "id":   "H"+GetRandomNumber(999, 999999999999),
    "StreetMame": $('#StreetName').val(),
    "Number": $('#Number').val(),
    "MaxPeople" : $('#MaxPeople select').val(),
    "aPeople": []
   };
   aHouses.push(oHouse);
   console.log(oHouse); 
   return oHouse;  
}

function CreateHouseInLayout(oHouse) { // use the passed house object
   var objHouse = $('#' + oHouse.id)

   objHouse.click(function(){
     $("#WindowDisplayHouseInfo").show();                            
     $('#ShowId').text("ID: " + oHouse.id);
     $('#ShowStreetName').text("Street Name: " + oHouse.StreetMame);
     $('#ShowNumber').text("Number: " + oHouse.Number);
     $('#ShowMaxInhabitants').text("Max inhabitants: " + oHouse.MaxPeople);

     for(var i = 0; i < oHouse.aPeople.length; i++) {
       $('#ShowInhabitants').html("<br />" + "Inhabitant: " + oHouse.aPeople.length 
                               +"<br />" + "ID: " + oHouse.aPeople[i].id
                               +"<br />" + "Name: " + oHouse.aPeople[i].Name
                               +"<br />" + "Last Name: " + oHouse.aPeople[i].Lastname
                               +"<br />" + "Age: " + oHouse.aPeople[i].Age
                               +"<br />" + "Gender: " + oHouse.aPeople[i].sGender
                               );
     }
     $('.DeleteHouse').click(function() {
            $(objHouse).children().each(function(){
                $(this).appendTo($('#City')).css({"top":"" , "left":""});
            });

            $(objHouse).remove();                  
            $("#WindowDisplayHouseInfo").hide();
     });
   });
}

请记住，现在使用 CreateHouseInLayout 方法，oHouse 变量是本地变量，并且在该方法中创建的所有函数都可以访问它。因此，您的 objHouse.click(function(){}) 也可以访问该本地副本并将显示正确的信息。其中 objHouse 是代表该特定房屋的单个元素。如果您像在 JSFIDDLE 示例中那样使用 $('.House').click() ，则将回调绑定(bind)到所有元素，但使用单个 oHouse 对象，因此它们都将显示相同的信息(即使用 objHouse 方法)。