带有对话框的Javascript构造函数

Question

我需要每辆车都有一个对话框；我已经实现了我所能实现的，但它确实有效，只是我不需要它如何工作；当点击的每个按钮时，它会打开页面底部的对话框

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

// 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();

Answer 1

有两件事需要更改：

1. 删除在car.showMore方法之外显示/隐藏带有汽车详细信息的对话框的逻辑

2. 与其将其附加到document.body，不如将其附加至具有其他元素的父div

我继续创建了一个.spacerdiv，而不是br，以更好地演示定位。看看下面的代码：

// 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";
imgProfile.style.outline = "2px solid orange";
// 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";
// Create a car dialog for each car only once in the main loop
let carDialog = document.createElement("dialog");
let y = document.createTextNode(car.make + "," + car.model + "," + car.colour + "," + car.registration + "," + car.price);
carDialog.appendChild(y);

// Attach it to car object
car.dialog = carDialog;

// Toggle its 'open' attribute here
car.showMore = function() {
arrayOfCars.forEach(function(curr) {
curr.dialog.removeAttribute("open");
})
car.dialog.setAttribute("open", "open");
};
btnDetails.addEventListener("click", function(e) {
car.showMore();
});
// line break
let lineBreak = document.createElement("div");
lineBreak.classList.add("spacer")

div.appendChild(imgProfile);
div.appendChild(carMake);
div.appendChild(btnDetails);
// Append the dialog here to the parent div
div.appendChild(carDialog);   
div.appendChild(lineBreak);
});
};
loaded.addCars();

dialog { margin: 0; }
.spacer{ margin: 100px 0; }

<div id="cars"></div>