1

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

在此处查看图片：

在此处输入图像描述

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

我在这里创建了一个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/

4

1 回答 1

0

里面：

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

您没有在函数范围内定义 oHouse var，稍后在 CreateHouseInLayout 函数中您不使用传递的参数，而是使用之前的全局变量。因此，click 函数在全局符号表中创建了一个 oHouse 变量，稍后可通过 CreateHourseInLayout 访问该变量，并且第一次可以正常工作，但是第二次单击时会覆盖全局变量，并且第一个 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() ，则将回调绑定到所有元素，但使用单个 oHouse 对象，因此它们都将显示相同的信息（即使用 objHouse 方法）。

于 2013-10-14T19:12:38.093 回答