Question

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

见图片：

enter image description here

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

我在这里创建了一个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。写（“街道名称：”+ this.StreetName）;然后它将无法正常工作。知道为什么吗？

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

Answer 1

内部：

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

您没有在函数范围中定义oHouse var，稍后在CreateHouseInLayout函数中，您不使用传递的参数，而是使用之前的全局变量。所以click函数在全局符号表中创建一个oHouse变量，后来可以通过CreateHourseInLayout访问，这可以在第一次正常工作，但是第二次点击你覆盖全局变量和第一个房子==第二个屋。您需要做的是适当调整变量的范围：

$('#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是代表特定房屋的单一元素。如果使用$（'。House'）。单击（）就像在JSFIDDLE示例中那样，你将回调绑定到所有元素，但是使用单个oHouse对象，所以它们都会显示相同的信息（即使用objHouse方法）。

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

1 个答案: