Может отображать только информацию о последнем созданном объекте | Перезаписывает предыдущие

Question

У меня есть система, где я могу создать несколько «домов» и «людей». Следующим шагом для меня является то, что я хочу отобразить некоторую информацию о доме, на который я нажимаю. Тем не менее, я могу получить доступ только к информации о последнем из созданных домов, а не о том, какой дом я нажимаю.

Смотрите изображение здесь:

Дом по праву является последний дом, который я создал. Информация отображается корректно. Но если я нажму первый дом (тот, который слева), моя информация не изменится.

Я создал JSFIDDLE здесь, где мы можем попробовать его для себя.

Я предполагаю, что моя проблема лежит где-то в моей objHouse.click (функция() Я попробовал несколько различных способов Прямо сейчас я пытаюсь предназначаться это следующим образом:..

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

Я очень надеюсь, что один из вас может сказать мне, что это то, что я делаю неправильно, я застрял в течение нескольких часов в настоящее время

UPDATE

Я обнаружил, что если я изменю..:

objHouse.click(function(){ 

в

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

, а затем изменить

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

в

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

Тогда он будет работать для ID, но если я Fx. write ("Street Name:" + this.StreetName); то это не сработает. Любая идея почему?

Обновлено JSFIDDLE здесь: http://jsfiddle.net/Adnaves/pcVR6/2/

Answer 1

Внутри:

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

Вы не определяют вар oHouse в области видимости функции, а затем в функции 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'). Click(), как в примере JSFIDDLE, вы привязываете обратный вызов ко всем элементам, но с одним объектом oHouse, поэтому все они будут отображать одну и ту же информацию (т. Е. используйте метод objHouse).