javascript - 使用对象方法设置 html 值真的很奇怪

标签 javascript html

我最近才开始学习 JS,尽管我对其他语言的编码并不陌生,但 JS 经常让我感到困惑。

如果我创建多个对象,构造函数的“CarFail”版本(不使用 JQuery)将不起作用(仅创建一个对象时效果很好)。构造函数的第二个“汽车”版本(使用 JQuery)效果很好。

我不明白为什么第一个构造函数版本失败。

我显然遗漏了一些微不足道的东西。

<div id="main"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

    function CarFail(x,y)
    {
        this.x=x;
        this.y=y;

        document.getElementById("main").innerHTML += '<img src="http://nostarch.com/images/car.png"/>';

        this.gelement=document.getElementById("main").lastChild;

        this.draw=function()
        {
            this.gelement.style.position="absolute";
            this.gelement.style.top=this.y+"px";
            this.gelement.style.left=this.x+"px";
        };
        this.draw();
    }

    function Car(x,y)
    {
        this.x=x;
        this.y=y;

        var carhtml = '<img src="http://nostarch.com/images/car.png"/>';

        this.gelement = $(carhtml);

        this.draw=function()
        {
            this.gelement.css({
                position: "absolute",
                left: this.x,
                top:this.y
            });
        };

        $("#main").append(this.gelement);
        this.draw();
    }

    var car1 = new Car(10,20);
    var car2 = new Car(50,90);

    car1.x=150;
    car1.draw();

</script>

最佳答案

重写 innerHTML 会更改该元素下的整个文档层次结构,因此之前存储的任何引用都会丢失。

我建议您改为使用 DOM 方法

let img = document.createElement('img')
img.src = 'http://nostarch.com/images/car.png'
this.gelement = document.getElementById("main").appendChild(img)

关于javascript - 使用对象方法设置 html 值真的很奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48432678/

相关文章:

javascript - 如何根据文本框输入动态填充选择框

javascript - 主干模型 : Keep Collection when saving

javascript - 它显示链接两次,而不是一次

html - CSS 正在向未指定边框的 div 添加边框

css - HTML5 布局和页脚错误

html - NVDA 未读取 div 上的 aria-label

javascript - 将代码块传递给函数/函数指针 JavaScript

javascript - 当项目停止在 .NET 中运行时,是否有办法阻止 Web 方法工作?

javascript - 按类别删除 div 的所有子级

javascript - 使用 .animate 滚动文本