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変数を定義せず、後でCreateHouseInLayout関数で、渡されたパラメーターを使用せずに、以前のグローバル変数を使用します。そのため、クリック関数はグローバル シンボル テーブルに oHouse 変数を作成します。これは後で CreateHourseInLayout からアクセスできます。これは最初は正常に機能しますが、2 回目にクリックすると、グローバル変数が上書きされ、最初の家 == 2 番目の家が上書きされます。家。あなたがする必要があるのは、変数を適切にスコープすることです:

$('#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 に答える