0

我的任务是使用构造函数创建 5 个汽车对象。每个对象都应该具有关于汽车的基本信息作为属性，并且还必须包含一个 showMore() 方法，该方法显示一个对话框，该对话框显示有关汽车的更多详细信息。每当用户单击按钮时，应调用 showMore() 方法并显示有关汽车的所有信息，包括注册号、价格等。所以我已经为这个任务编写了代码，但我不确定我在对话框代码方面做错了什么。

//constructor function
function Car(brand,model,colour,regNumber, carsPicture,price){
    this.brand = brand;
    this.model = model;
    this.colour = colour;
    this.regNumber = regNumber;
    this.imageSrc = carsPicture;
    this.price = price;
    this.showMore = function(){
        document.querySelector(".featured-cars");
        let dialog = document.createElement("dialog");
        dialog.classList.add("dialog-box");
        let paragraph = document.createElement("p");
        paragraph.classList.add("showMore-info");
        paragraph.innerHTML =  
        "Brand: " + this.brand +
        "Modal: " + this.model +
        "Colour: " + this.colour +
        "Reg.Number: " + this.regNumber;
        let perchase = document.createElement("button");
        perchase.innerHTML= "Buy";

    };
    
};
let car1 = new Car(
    "Mercedes",
    "AMG",
    "Metalic",
    "CA227788",
    "https://images.pexels.com/photos/112460/pexels-photo-112460.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "R 120 000"
);
let car2 = new Car(
    "Jeep",
    "Cherokee SUV",
    "White",
    "234 567 GP",
    "https://images.pexels.com/photos/119435/pexels-photo-119435.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "R 200 000"
);
let car3 = new Car(
    "Audi",
    "Coupe",
    "Yellow",
    "123456 KZN",
    "https://images.pexels.com/photos/1149831/pexels-photo-1149831.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "R 154 897"
);
let car4 = new Car(
    "BMW",
    "4 series Coupe",
    "Blue",
    "246810 EC",
    "https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
     "R 200 000"
);
let car5 = new Car(
    "Pontiac",
    "Sedan",
    "Yellow",
    "321 Ready WP",
    "https://images.pexels.com/photos/4502385/pexels-photo-4502385.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "R 300 000"
);
let theCars = [car1,car2,car3,car4,car5];
let carSales = {};
carSales.addCars = function(){
    theCars.forEach(function (car4sale){
        let div = document.querySelector(".featured-cars");
        let carImg = document.createElement("img");
        carImg.classList.add("carImages");
        carImg.src = car4sale.imageSrc;
        carImg.alt = car4sale.colour+ " " + car4sale.brand;
        

        let btnShowmore = document.createElement("button");
        btnShowmore.classList.add("viewMoreBtn");
        btnShowmore.innerHTML = "View More";
        btnShowmore.addEventListener("click", function() {
            car4sale.showMore();
        });
        
        let carPrice = document.createElement("h2");
        carPrice.classList.add("carPrice");
        carPrice.innerHTML = car4sale.price;

        let carColorAndBrnad = document.createElement("h3");
        carColorAndBrnad.classList.add("color-and-brand");
        carColorAndBrnad.innerHTML = car4sale.colour+ " " +car4sale.brand;

        let carinfo = document.createElement("div");
        carinfo.classList.add("carInfo");
        carinfo.classList.add("overlay");
        carinfo.appendChild (carPrice);
        carinfo.appendChild(carColorAndBrnad);
        carinfo.appendChild(btnShowmore);

        div.appendChild(carImg);
        div.appendChild(carinfo);
    });
};
carSales.addCars();
<div class="featured-cars"></div>

4

1 回答 1

1

研究一下这个

我将事件处理程序移动到容器（称为委托）并将汽车的索引保存在按钮中

const container = document.querySelector(".featured-cars");
//constructor function
function Car(brand, model, colour, regNumber, carsPicture, price) {
  this.brand = brand;
  this.model = model;
  this.colour = colour;
  this.regNumber = regNumber;
  this.imageSrc = carsPicture;
  this.price = price;
};
let theCars = [new Car( "Mercedes", "AMG", "Metalic", "CA227788", "https://images.pexels.com/photos/112460/pexels-photo-112460.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", "R 120 000" ), new Car( "Jeep", "Cherokee SUV", "White", "234 567 GP", "https://images.pexels.com/photos/119435/pexels-photo-119435.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", "R 200 000" ), new Car( "Audi", "Coupe", "Yellow", "123456 KZN", "https://images.pexels.com/photos/1149831/pexels-photo-1149831.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", "R 154 897" ), new Car( "BMW", "4 series Coupe", "Blue", "246810 EC", "https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", "R 200 000" ), new Car( "Pontiac", "Sedan", "Yellow", "321 Ready WP", "https://images.pexels.com/photos/4502385/pexels-photo-4502385.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", "R 300 000" ) ];

let carSales = {};
carSales.addCars = function() {
  theCars.forEach(function(car4sale, i) {
    const div = document.createElement("div");
    let carImg = document.createElement("img");
    carImg.classList.add("carImages");
    carImg.src = car4sale.imageSrc;
    carImg.alt = car4sale.colour + " " + car4sale.brand;
    let btnShowmore = document.createElement("button");
    btnShowmore.classList.add("viewMoreBtn");
    btnShowmore.innerHTML = "View More";
    btnShowmore.dataset.idx = i;
    let carPrice = document.createElement("h2");
    carPrice.classList.add("carPrice");
    carPrice.innerHTML = car4sale.price;

    let carColorAndBrnad = document.createElement("h3");
    carColorAndBrnad.classList.add("color-and-brand");
    carColorAndBrnad.innerHTML = car4sale.colour + " " + car4sale.brand;

    let carinfo = document.createElement("div");
    carinfo.classList.add("carInfo");
    carinfo.classList.add("overlay");
    carinfo.appendChild(carPrice);
    carinfo.appendChild(carColorAndBrnad);
    carinfo.appendChild(btnShowmore);

    div.appendChild(carImg);
    div.appendChild(carinfo);
    container.appendChild(div);
  });
};
carSales.addCars();

container.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("viewMoreBtn")) {
    const parent = tgt.closest("div")
    const idx = tgt.dataset.idx;
    let dialog = document.createElement("dialog");
    dialog.classList.add("dialog-box");
    let close = document.createElement("button")
    close.addEventListener("click",function() { this.closest("dialog").close() })
    close.innerHTML = "X"
    dialog.appendChild(close)
    let paragraph = document.createElement("p");
    paragraph.classList.add("showMore-info");
    paragraph.innerHTML =
      "Brand: " + theCars[idx].brand +
      "Model: " + theCars[idx].model +
      "Colour: " + theCars[idx].colour +
      "Reg.Number: " + theCars[idx].regNumber;
    let purchase = document.createElement("button");
    purchase.innerHTML = "Buy";
    dialog.appendChild(paragraph)
    dialog.appendChild(purchase)
    document.body.appendChild(dialog)
    dialog.showModal()
  }
})
.dialog-box {
  position: absolute: top:100px;
  left: 100px;
}
<div class="featured-cars"></div>

于 2021-11-02T15:46:28.667 回答