带有对话框的 Javascript 构造函数

如何解决带有对话框的 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();

解决方法

你需要改变两件事：

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

2. 不是将其附加到 document.body，而是将其与其他元素一起附加到父级 div

我继续创建了一个 .spacer div 而不是 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>