javascript - 当我点击一个新对象时忘记了之前的点击？

Question

我有一个系统，您可以在其中创建房屋和一些人。当你创建了房子，然后点击它，一些信息就会出现。您还将有机会删除房屋。

但是，如果您点击新房子，系统现在会忘记之前的点击。因此，我点击的两个房子都将被删除。

您可以在 JSFIDDLE 中测试它

这一切都发生在我的点击函数中:

  var objHouse = $('#' + oHouse.id)

  objHouse.click(function(){

    $('#WindowDisplayCarInfo').hide();
    $('#WindowDisplayPersonInfo').hide();
    $("#WindowDisplayHouseInfo").show();

    $('#ShowId').text("ID: " + this.id);
    $('#ShowStreetName').text("Street Name: " + oHouse.StreetName);
    $('#ShowNumber').text("Number: " + oHouse.Number);
    $('#ShowInhabitants').empty();
    $('#ShowMaxInhabitants').text("Max inhabitants: " + oHouse.MaxPeople);


    for(var i = 0; i < oHouse.aPeople.length; i++)
    {
    $('#ShowInhabitants').append("<br />" 
                               +"<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($('#container')).css({"top":"" , "left":"", "display":"block"});
            });

            $(objHouse).remove();                  
            $("#WindowDisplayHouseInfo").hide();
        });
}); 

(它从 JSFIDDLE 的第 130 行开始。)

希望你能教我一两个窍门。 :-)

Answer 1

这可能不是很好的做法，但大约 30 分钟后，我就可以想出所有的办法了。它只是从右上角的框中提取 ID，并仅删除选定的框。 “不良做法”可能是 substr 部分。为了让它稍微好一点，您可能需要利用 indexOf() 来查找 ID 的开头，而不仅仅是整数 4，以防该 ID 框的结构发生变化。

$('.DeleteHouse').click(function()
{
    $(objHouse).children().each(function(){
        $(this).appendTo($('#container')).css({"top":"" , "left":"", "display":"block"});
    });
    var currentID = $("#ShowId").html().substr(4);
    console.log(currentID);
    $("#"+currentID).remove();  
    $("#WindowDisplayHouseInfo").hide();
});

http://jsfiddle.net/t8TKc/3/