Javascript 只能显示有关上次创建对象的信息|覆盖以前创建的对象

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

如图所示：

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

我在这里创建了一个网站，我们可以自己尝试

我猜我的问题出在objHouse.clickfunction的某个地方。我试过几种不同的方法。现在，我正试图以这样的方式瞄准它：

$('#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();
        });
}); 

到

然后改变

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

到

然后它将用于ID，但如果我使用fx。写下街道名称：+this.StreetName；那就不行了。知道为什么吗

这里更新了JSFIDLE:

内部：

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

您不会在函数作用域中定义oHouse变量，稍后在CreateHouseInLayout函数中，您不会使用传递的参数，而是以前的全局变量。因此，click函数在全局符号表中创建一个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.clickfunction{}也可以访问该本地副本，并将显示正确的信息。其中objHouse是表示特定房屋的单个元素。如果您使用$'.House'。像在JSFIDLE示例中一样单击，那么您将回调绑定到所有元素，但是使用一个oHouse对象，因此它们都将显示相同的信息，即使用objHouse方法。

这不是问题所在。我可以用这个.ID取class.House的ID。但是我的班级。豪斯没有任何名字叫：StreetName。我的房子才有这个价值。所以我又被卡住了。var oHouse={StreetMame:$'StreetName'.val}就在这里。别介意打字错误，我自己的文件已经更正了。非常感谢。谢谢你对你所做的解释。现在我应该也能在我的车上这样做了。你可能已经发现了我的for循环。如果我把一个人拖到我的房子顶上，我应该看到住在那里的人的信息。但现在它也只是给我看最后一个被放进房子里的人。你知道我如何修复它吗？和另一个一样，$'.house'。Dropable是为所有房子创建的，但它只引用最后一个。在CreateHouseInLayout中，确保仅将事件绑定到表示房屋的特定DOM元素。另外，为了避免混淆，可以使用jQuery.data将对象存储在元素中。因此，当您创建一个人时，您可以执行personObj.data'info'，而当您要显示房子的信息时，只需执行objHouse.find'.person'.eachfunction{var i=$this.data'info'；…}。也许可以尝试这样的方法。让人们使用附加到div中的html元素更容易，因为当一个人搬到另一所房子时，你不需要担心从数组中删除元素。谢谢。这可能是一个有点复杂的解决方案，我现在。但它确实给了我未来的追求

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

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

$('#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();
     });
   });
}