Bootstrap Carousel：無法讀取未定義的屬性'offsetWidth'

Question

我正在使用自舉輪播，並想出了一個功能，可以在輪播內部生成“項目”，該項目可以按預期工作。

當用戶單擊頁面上的許多圖片之一時，我將全屏顯示輪播，並使用該文件夾中的其他圖像填充該輪播（每個圖像都有其自己的文件夾，其中包含與之相關的其他圖像）。

但是，單擊圖片后，大約有五分之一的圖片能夠全屏顯示，但是控件無法正常工作（並且在顯示“無法讀取屬性'offsetWidth'of undefined'錯誤控制台）。 奇怪的是，如果我再次嘗試單擊同一張圖片，它將正常工作。

的HTML

<div class="row carousel-holder" id="fotenha2">
  <div class="col-md-12" id="carCol">
    <div id="banners" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" role="listbox" id="carCont" oncontextmenu="return false;">  
      </div>
      <a class="left carousel-control" href="#banners" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden:"true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#banners" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden:"true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>        
</div>

的JavaScript

function createCarousel(folder, items) {
  for (var i=1; i<=items; i++) {
    var content = document.getElementById('travelCont');
    var imageCont = document.getElementById('fotenha2');
    imageCont.style.display = "block";
    content.style.display = "none";
    var path = 'assets/travel/'+folder+'/000'+i+'.jpg';
    var item = document.createElement("DIV");
    var anchor = document.createElement("a");
    var img = document.createElement("IMG");
    img.className="slide-image";
    img.src = path;
    anchor.appendChild(img);
    anchor.href = "";
    item.appendChild(anchor);
    item.className="item"; 
    if (i === 1) {
      item.className = "item active"; 
    }
  item.onclick="closeTravelArticle()";
  document.getElementById('carCont').appendChild(item);
  }
}

任何有關為什么發生這種情況的想法都將非常有幫助。

PS：針對其他問題（例如我的問題）的解決方案是將“ active”添加到我已經在做的第一項中

Answer 1

我建議使用AngularJS ，它們具有一個不錯的功能，可以使用ng-repeat 。 您所需要的只是一個對象，其中包含您的數據以及要重復的元素上的ng- repeat。

 var app = angular.module("app", []); app.controller("myCtrl", function($scope) { $scope.items = { 0 : { 'id' : 1, 'name' : 'Item 1' }, 1 : { 'id' : 2, 'name': 'Item 2' } }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ng-app="app" ng-controller="myCtrl"> <ul> <li ng-repeat="x in items" id="{{ x.id }}">{{ x.name }}</li> </ul> </div> 

我建議根據我自己的經驗。 我現在正在使用AngularJS創建多個項目，我認為這是目前最好的框架之一。 另外，對於我的一個項目，我想和您一樣做，對我來說效果很好。