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

您需要更改 2 处内容：

删除 showing/hiding 对话框的逻辑，在 car.showMore 方法之外包含汽车详细信息
与其将其附加到 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>

Javascript 带对话框的构造函数

Javascript Constructor with Dialog

javascript

constructor

dialog