第一种方式

Question

我尝试在浏览器中绘制两个图像。我有这个代码片段。但我只看到一张图片

<!DOCTYPE html>
<html>
<head>
    <title>Cars</title>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <script>


        $(document).ready(function () {

            var Car = function (x, y) {
                this.x = x;
                this.y = y;
            };
            var drawCar = function (car) {
                var carHtml = $('#carImage');
                var carElement = $(carHtml);
                carElement.css({
                    position: "absolute",
                    left: car.x,
                    top: car.y
                });
                $("body").append(carElement);
            };

            var tesla = new Car(20, 20);
            var nissan = new Car(100, 200);

            drawCar(tesla);
            drawCar(nissan);          

        });
    </script>

</head>
<body>

    <img src="_images/car.png" id="carImage" />   

</body>
</html>

但我只在浏览器中看到一张图片。

如何显示两张图片？

谢谢

更新帖子。我已经改变了代码。谢谢

你的意思是这样的。第一种方式：但我只看到一张图像。那么如何更改代码呢？谢谢。尼斯

<script>


        $(document).ready(function () {           
            var Car = function (x, y) {
                this.x = x;
                this.y = y;
            };
            var drawCar = function (car) {
                //var carHtml = $('#carImage');
                var imgTag = $('<img src="_images/car.png" id="carImage" />')
                imgTag.appendTo('body');


                var carElement = $(carHtml);
                carElement.css({
                    position: "absolute",
                    left: car.x,
                    top: car.y
                });              

                //$("body").append(carElement);
            };

            var tesla = new Car(20, 20);
            var nissan = new Car(100, 200);



                drawCar(tesla);
                drawCar(nissan);           

        });

    </script>

Answer 1

第一种方式

您的两张图片都绘制在同一图片代码中。您应该创建一个图像标记，然后将图像标记附加到正文。在您的绘制汽车功能中，删除您的逻辑以选择您已用此声明的图像，每次您的功能运行时都会附加新图像。

var imgTag = $('<img src="_images/car.png" id="carImage" />')
imgTag.appendTo('body');

您也可以删除身体中的声明。

第二种方式

您可以尝试将要复制的元素克隆到文档中：

            var drawCar = function (car) {
            var carHtml = $('#carImage');
            var carElement = $(carHtml);
            carElement.css({
                position: "absolute",
                left: car.x,
                top: car.y
            });
            $("body").append(carElement.clone());
        };

在浏览器中绘制更多对象

1 个答案:

第一种方式

第二种方式