时间戳

首页 > 解决方案 > 如何使用 javascript 和 HTML 模板来填充 div

javascript - 如何使用 javascript 和 HTML 模板来填充 div

问题描述

我想在 <div id = "newBook"></div> .它是 webpack 项目中显示具有 newBook 属性的元素（书）。请告诉我是否需要一些额外的进口或类似的东西。

export class Book {
        constructor(price, title, image, description) {
            var bookTemplate = '<div class="col-lg-3 col-md-6 mb-4">\
            <div class="card">\
            <a href="#"><img class="mx-auto-d-block-card-img-top-fixed-top" src="{image}" width="335" height="340"\
            alt=""></a>\
            <div class="card-body">\
            <h4>{title}</h4>\
            <h5>{price}</h5>\
            <h5>\
            <a href="#">Kup teraz!</a>\
            </h5>\
            <p class="card-text">{description}</p>\
            </div>\
            <div class="card-footer">\
            <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9733;</small>\
            </div>\
            </div>\
            </div>';
            var result = bookTemplate.replace("{title}", this.title);
            result = result.replace("{image}", this.image);
            result = result.replace("{price}", this.price);
            result = result.replace("{description}", this.description);
            return result;
        }
    }

    export function initBook() {
        var newBook = new Book();
        newBook.title = "Chów i hodowla trzody chlewnej";
        newBook.image = "swinie.jpg";
        newBook.price = "135zł";
        newBook.description = "Podręcznik, który wyjaśnia jak chodować świnie.";
        newBook.transform();
        $("#newBook").html(newBook.transform());
    }

标签： javascripthtml

解决方案

所以你真的很接近解决方案。我稍微清理了您的代码，以使其在您的工作中更加清晰。首先，在您的图书课程中，无需进行所有字符串替换并根据替换进行返回。您真正可以做的，以及您在这里看到的是使用简单的模板文字并直接从传入的构造函数参数进行替换。注意 ${} 语法，这是替换值。所以现在你有了一个简单的 book 类，它只有一个 bookTemplate 属性。

图书类示例：

export class Book { 
   constructor(price, title, image, description) {
       this.bookTemplate = `
           <div class="col-lg-3 col-md-6 mb-4">
               <div class="card">
                  <a href="#">
                     <img class="mx-auto-d-block-card-img-top-fixed-top"
                          src="${image}" width="335" height="340" alt="${image}"
                          style="border: solid 1px #999999;"></a>
      <div class="card-body">
        <h4>${title}</h4>
        <h5>${price}</h5>
        <h5>\
          <a href="#">Kup teraz!</a>
        </h5>
        <p class="card-text">${description}</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9733;</small>\
      </div>
    </div>
  </div>
  `;
  }
}

现在在 initBook 函数中，我创建了一个简单的对象字面量，其中包含需要在新 Book 构造函数中传递的属性。然后我们在您的 HTML 页面上获取一个元素的 id，以便我们可以用我们的书籍模板替换它。我们使用之前的参数创建一本新书，最后我们通过再次执行模板文字并从 Book 类调用 bookTemplate 属性，将新书模板分配给页面上的 HTML 目标。最后，我们只需调用函数 initBook() 将模板渲染到页面。

initBook 函数示例：

export function initBook() {
var params = {
    title: "Chów i hodowla trzody chlewnej",
    image: "swinie.jpg",
    price: "135zł",
    description: "Podręcznik, który wyjaśnia jak chodować świnie."
};

   const book = document.getElementById("newBook");
   const elements = new Book(params.price, 
                          params.title, params.image,params.description);
    console.log(elements);
    book.innerHTML = `${elements.bookTemplate}`;
}

initBook();

要替换的目标 div 的 HTML 示例：

<div id="newBook"></div>

为了您的方便，这里是上面提供的代码的一个工作示例。

希望这对您有所帮助。

推荐阅读