带对话框的Javascript构造函数

我需要为每辆车设置一个对话框；我已经实现了我所能做到的，但它确实有效，而不是我所需要的工作方式；单击每个按钮时，会打开页面底部的对话框

我希望它能在每辆车的下面或旁边打开，并且我希望它能为每辆车打开，而不是每次都覆盖它

// constructor function
function Car(make, model, colour, image, registration, price) {
    this.make = make;
    this.model = model;
    this.colour = colour;
    this.imageSrc = image;
    this.registration = registration;
    this.price = price;
}

// creating the car objects
var carObj1 = new Car(
    "Hyundai",
    "Tucson",
    "Silver",
    "./cars/hyundai.jpg",
    "FC51TSGP",
    "R350 000"
);

var carObj2 = new Car(
    "Renault",
    "Sandero",
    "White",
    "./cars/renault.jpg",
    "PT69LMGP",
    "R150 000"
);

var carObj3 = new Car(
    "Toyota",
    "Hilux",
    "Red",
    "./cars/Toyota.jpg",
    "JK98YUGP",
    "R550 000"
);

var carObj4 = new Car(
    "Nissan",
    "Navara",
    "Black",
    "./cars/nissan.jpg",
    "DT12CXGP",
    "R450 000"
);

var carObj5 = new Car(
    "Volkswagen",
    "Golf",
    "Blue",
    "./cars/volkswagen.jpg",
    "QS56REGP",
    "R200 000"
);

// cars array
let arrayOfCars = [carObj1, carObj2, carObj3, carObj4, carObj5];

// function to display objects when cars.html is loaded
var loaded = {};

loaded.addCars = function() {
    arrayOfCars.forEach(function(car) { 
        let div = document.getElementById("cars"); 
        //Image element
        let imgProfile = document.createElement("img");
        imgProfile.src = car.imageSrc;
        imgProfile.alt = car.make + " " + car.model;
        imgProfile.style.height = "200px";
        imgProfile.style.width = "295px"; 

// display car make and model
let carMake = document.createElement("p"); 
        carMake.innerHTML = car.make + " " + car.model;

// showMore() method with dialog
 let btnDetails = document.createElement("button"); 
        btnDetails.innerHTML = "Show More";

 car.showMore = function() {
           let x = document.createElement("dialog");
           let y = document.createTextNode(car.make + "," + car.model + "," + car.colour + "," + car.registration + "," + car.price);
           x.setAttribute("open","open");
           x.appendChild(y);
           document.body.appendChild(x);
        };

btnDetails.addEventListener("click", function(e) {
            car.showMore();
        });

// line break
let lineBreak = document.createElement("br");

        div.appendChild(imgProfile);
        div.appendChild(carMake);
        div.appendChild(btnDetails);
        div.appendChild(lineBreak);
    });
};

loaded.addCars();

---

有两件事你需要改变：

删除在

car.showMore方法之外显示/隐藏包含汽车详细信息的对话框的逻辑

与其将其附加到

document.body

，不如将其与其他元素一起附加到父级

div

我继续创建了一个

.spacer

div，而不是

br

，以更好地演示定位。请查看下面的代码：

//构造函数
多功能车（品牌、型号、颜色、图像、登记、价格）{
make=make；
this.model=模型；
这个颜色=颜色；
this.imageSrc=image；
这个。注册=注册；
这个价格=价格；
}
//创建汽车对象
var carObj1=新车(
“现代”，
“图森”，
“银”，
“/汽车/现代.jpg”，
“FC51TSGP”，
“R350000”
);
var carObj2=新车(
“雷诺”，
“桑德罗”，
“白色”，
“/cars/renault.jpg”，
“PT69LMGP”，
“150000南非兰特”
);
var carObj3=新车(
“丰田”，
“Hilux”，
“红色”，
“/汽车/丰田.jpg”，
“JK98YUGP”，
“R55万”
);
var carObj4=新车(
“日产”，
“纳瓦拉”，
“黑色”，
“/cars/nissan.jpg”，
“DT12CXGP”，
“R450 000”
);
var carObj5=新车(
“大众”，
“高尔夫”，
“蓝色”，
“/cars/volkswagen.jpg”，
“QS56REGP”，
“200 000南非兰特”
);
//汽车阵列
设arrayOfCars=[carObj1，carObj2，carObj3，carObj4，carObj5]；
//函数在加载cars.html时显示对象
var-loaded={}；
loaded.addCars=函数（）{
arrayOfCars.forEach（功能（汽车）{
让div=document.getElementById（“cars”）；
//象元
让imgProfile=document.createElement（“img”）；
imgProfile.src=car.imageSrc；
imgProfile.alt=car.make+“”+car.model；
imgProfile.style.height=“200px”；
imgProfile.style.width=“295px”；
imgProfile.style.outline=“2px实心橙色”；
//展示汽车品牌和型号
设carMake=document.createElement（“p”）；
carMake.innerHTML=car.make+“”+car.model；
//带有对话框的showMore（）方法
让btnDetails=document.createElement（“按钮”）；
btnDetails.innerHTML=“显示更多”；
//在主循环中仅为每辆车创建一次车对话框
让carDialog=document.createElement（“对话框”）；
设y=document.createTextNode（car.make+”、“+car.model+”、“+car.color+”、“+car.registration+”、“+car.price”）；
加的亚罗格儿童（y）；
//将其附加到汽车对象上
car.dialog=carDialog；
//在此处切换其“打开”属性
car.showMore=函数（）{
arrayOfCars.forEach（函数（当前）{
当前对话框删除属性（“打开”）；
})
car.dialog.setAttribute（“打开”、“打开”）；
};
btnDetails.addEventListener（“单击”，函数（e）{
car.showMore（）；
});
//断线
让lineBreak=document.createElement（“div”）；
lineBreak.classList.add（“间隔符”）
儿童分部（imgProfile）；
儿童部（卡马克）；
附件子项（btnDetails）；
//将此处的对话框附加到父div
儿童分部（加的亚洛）；
子分区（换行符）；
});
};
加载。addCars（）
对话框{margin:0；}
.spacer{margin:100px 0；}