Question

我想在页面中查看此卡，但它没有显示任何内容。我使用firebase作为我的后端我试图在表中扩充从firebase检索到的数据，并且它与append（）函数一起正常工作但是当尝试使用cardView时它不起作用这是我的代码：

的index.html：

  <div class="mdl-layout__drawer">
   <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
     <a class="mdl-navigation__link" href="">Link</a>
     <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
   </div>
   <main class="mdl-layout__content">
     <div class="page-content"> 
        <!-- Your content goes here -->
                     <div id="comments" class="inline-grid">
                     </div>
      </div>
     </main>

这是我的index.js：

var rootRef = firebase.database().ref().child("Stories");
rootRef.on("child_added", snap =>{
var title = snap.child("title").val();
var content = snap.child("content").val();
$("#comments").append(" <div class="mdl-card__title">
<h2 class="mdl-card__title-text">"+ title +"</h2>
 </div>
 <div class="mdl-card__supporting-text">
     "+ content +"
  </div>
   <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-
   effect">
     Get Started
    </a>
   </div>
   <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-
     effect">
     <i class="material-icons">share</i>
    </button>
   </div>");
    });

Answer 1

在.append()中，您作为参数传递的HTML不是有效字符串。在指定类属性时，使用双引号，JavaScript将其解释为字符串的结尾，因为您也使用双引号括起字符串。

对此的一个解决方法是使用反斜杠转义字符串中的双引号：
"\""。

另一种方法是将字符串括在单引号而不是双引号中。然后你可以这样写：

var html = '<div class="mdl-card__title">'+
        '<h2 class="mdl-card__title-text">'+ title +'</h2>'+
      '</div>'+
      '<div class="mdl-card__supporting-text">'+ content +'</div>'+
      '<div class="mdl-card__actions mdl-card--border">'+
        '<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Get Started</a>'+
      '</div>'+
      '<div class="mdl-card__menu">'+
        '<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">'+
            '<i class="material-icons">share</i>'+
        '</button>'+
      '</div>';

$("#comments").append(html);

没有必要将字符串分成如此多的行，但我更喜欢这种方式，以使HTML更具可读性。

如何正确充气？

1 个答案: