javascript - HTML 中的模板标签 : querySelector just return null value

Question

我也在制作一个用于教育目的的网站，但我遇到了一些我自己无法弄清楚的错误。

我写了一个模板，例如:

<div class="row" style="height: 75%;" align="center" id="room-list">
  <template id="room-template" class="slide">
    <div class="col-md-4" id="left-item">
      <div class="panel panel-default panel-primary">
        <div class="panel-heading">
          <span id="room-type"></span>
        </div>
        <div class="panel-body">
          <div id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;"></div>
          <div id="utility">
            Utilities:
          </div>
          <div id="price">
            Price:
            <span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
            <span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
          </div>
        </div>
        <div class="panel-footer">
          <button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
        </div>
      </div>
    </div>
    <div class="col-md-4" id="center-item">
    <div class="panel panel-default panel-primary">
      <div class="panel-heading">
        <span id="room-type"></span>
      </div>
      <div class="panel-body">
        <div id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;"></div>
        <div id="utility">
          Utilities:
        </div>
        <div id="price">
          Price:
          <span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
          <span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
        </div>
      </div>
      <div class="panel-footer">
        <button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
      </div>
    </div>
  </div> 
  <div class="col-md-4" id="right-item">
    <div class="panel panel-default panel-primary">
      <div class="panel-heading">
        <span id="room-type"></span>
      </div>
      <div class="panel-body">
        <div>
          <img id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;">
        </div>
        <div id="utility">
          Utilities:
        </div>
        <div id="price">
          Price:
          <span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
          <span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
        </div>
      </div>
      <div class="panel-footer">
        <button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
      </div>
    </div>
  </div> 
  </template>
</div>

我使用 jquery 将该模板添加到附加大量 div 中。

var roomList = document.querySelector('template# room-list').content;
for (var i = 0; i < roomEntities.length; i++) {
  var room = roomEntities[i];
  var price = priceEntities[i];
  var type = room.type;
  var thumbnail = room.thumbnail;
  var sale = price.sale;
  var original = price.original;

  for (var i = 0; i < 3; i++) {
    var slt = "#center-item";
    if (i == 0) {
      slt = "#left-item";
    }
    else
      slt = "#right-item";
    var tpl = document.getElementById('room-template');
    tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText = type;
    tpl.querySelector(slt + '.panel-body #thumbnail').attr('src') = thumbnail;
    tpl.querySelector(slt + '.panel-body #sale').innerText = sale;
    tpl.querySelector(slt +'.panel-body #original').innerText = original;
    roomList.appendChild(tpl.content.cloneNode(true));
  }
}

但它总是在 tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText = type; 处返回错误，它说无法设置属性innerText为null，表示在模板中找不到该元素。

任何建议或推荐。请帮忙。非常感谢

Answer 1

更改代码中的所有选择器

   tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText
    tpl.querySelector(slt + ' .panel-default .panel-heading #room-type').innerText