Question

我正在使用bootstrap carousel并且已经提出了一个函数来生成carousel-inner内部的“item”，它可以按预期工作。

当用户点击页面上的许多图片之一时，我会在全屏显示轮播并将其与该文件夹中的其他图像一起填充（每个图像都有自己的文件夹，其中包含与之相关的额外图像）。

然而，我点击一张图片大约有五分之一的时间我能看到第一个项目全屏但是控件不起作用（我得到了'无法读取属性'offsetWidth'的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：像我这样的其他问题的解决方案是在第一项添加“活动”，我已经在做了

Answer 1

我建议使用RFC 1423，它们有一个很好的功能，可以使用名为 ng-repeat 。您只需要一个包含数据的对象和要重复的元素上的 ng-repeat 。

＆＃13;

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

＆＃13;

<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>

＆＃13;

我建议根据自己的经验。我现在正在使用AngularJS创建多个项目，我认为它是最好的框架之一。另外，对于我的一个项目，我想和你一样，这对我来说非常好。

Bootstrap Carousel：无法读取undefined的属性'offsetWidth'

1 个答案: