时间戳

首页 > 解决方案 > JavaScript 将“\”添加到 CSS 类

javascript - JavaScript 将“\”添加到 CSS 类

问题描述

我正在尝试使用 JavaScript 中的循环使用数组中的内容填充 index.html。但是，用于图片格式化的 CSS 类在其周围出现了一些奇怪的“”字符，因此它不会反映在浏览器（最新版本的 Firefox）上。

我需要知道为什么会发生这种情况，如何避免它，或者可能是让这个 CSS 类应用于最终结果的另一种方式。

这就是我在 Firefox 调试器上得到的

function popularIndex(){
  $("#mostrarRecetas").html("");
  let listadoRecetas = "";
  for (i = 0; i < recetas.length; i++) {
    let articuloReceta = '<div>';
    articuloReceta += '<div class="recetaFoto">' //here is where I getting the "\recetaFoto\" thing
    articuloReceta += '<img src=/images/' + recetas[i].foto + '></div>';
    articuloReceta += '<div> <h1>' + recetas[i].titulo + '</h1></div>';
    articuloReceta += '<div class="card bg-light"><div class="card-body row"><div class="col-sm-6"><p>' + recetas[i].autor + '</p></div><div class="col-sm-6"><p>' + recetas[i].tiempo + 'minutos</p></div></div></div>'
    articuloReceta += '<div><p>' + recetas[i].metodo + '</p></div>'
    articuloReceta += '<div class="card-body row"><div><p>' + recetas[i].likes + '</p></div><div><button type="button" class="btn btn-sm"><i class="material-icons"aria-hidden="true">thumb_up</i></button><button type="button" class="btn btn-sm"><i class="material-icons"aria-hidden="true">thumb_down</i></button></div><div><p>' + recetas[i].dislikes + '</p></div></div>'    
    articuloReceta += '</div>';
    listadoRecetas += articuloReceta;
  }
  $("#mostrarRecetas").html($("#mostrarRecetas").html() + listadoRecetas);

这是我要申请的课程。

#recetaFoto {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    object-fit:cover;
}

标签： javascripthtmlcssbootstrap-4

解决方案

Javascript没有在您的代码中添加它的转义特殊字符，以便能够"在您可以使用的字符串中使用'words " words ...'（就像您所做的那样）或"words \" words ..."几乎相同的东西。

您应该使用模板文字

尝试这个：

$("#mostrarRecetas").html("")
let listadoRecetas = "";
for (i = 0; i < recetas.length; i++) {
  
  let articuloReceta = `<div>
    <div id="recetaFoto">
      <img src="/images/${recetas[i].foto}" />
    </div>
    <div>
      <h1>${recetas[i].titulo}</h1>
    </div>
    <div class="card bg-light">
      <div class="card-body row">
        <div class="col-sm-6">
          <p>${recetas[i].autor}</p>
        </div>
        <div class="col-sm-6">
          <p>${recetas[i].tiempo} minutos</p>
        </div>
      </div>
    </div>
    <div>
      <p>${recetas[i].metodo}</p>
    </div>
    <div class="card-body row">
      <div>
        <p>${recetas[i].likes}</p>
      </div>
      <div>
          <button type="button" class="btn btn-sm" id="search-icon">
            <i class="material-icons" aria-hidden="true">thumb_up</i>
          </button>
          <button type="button" class="btn btn-sm" id="search-icon">
            <i class="material-icons" aria-hidden="true">thumb_down</i>
          </button>
      </div>
      <div>
        <p>${recetas[i].dislikes}</p>
      </div>
    </div>
  </div>`;

  listadoRecetas += articuloReceta;
}
$("#mostrarRecetas").html($("#mostrarRecetas").html() + listadoRecetas);

你做错了什么'<img src=/images/' + recetas[i].foto + '></div>'应该是'<img src="/images/' + recetas[i].foto + '"></div>'

推荐阅读