Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/80.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 引导转盘每个幻灯片2个项目用于循环_Javascript_Html_Bootstrap 4_Bootstrap Carousel - Fatal编程技术网

Javascript 引导转盘每个幻灯片2个项目用于循环

Javascript 引导转盘每个幻灯片2个项目用于循环,javascript,html,bootstrap-4,bootstrap-carousel,Javascript,Html,Bootstrap 4,Bootstrap Carousel,我有一个数组;看起来是这样的: array = [ { id:1, metadata:['object','object'] }, { id:2, metadata:['object','object'] }, { id:3, metadata:['object','object'] }] 这就是我正在做的: array.forEach(function(elem){ output_info +=`<div class="col

我有一个数组;看起来是这样的:

array = [
{
    id:1,
    metadata:['object','object']
},
{
    id:2,
    metadata:['object','object']
},
{
    id:3,
    metadata:['object','object']
}]
这就是我正在做的:

array.forEach(function(elem){
      output_info +=`<div class="col-md-12">
          <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
             <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
             <li data-target="#myCarousel" data-slide-to="1"></li>
             <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>


            <div class="carousel-inner">`


      elem.metadata.forEach(function(trip){
        output_info += each_metadata_html(trip)
      })
      output_info += `</div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>`
  })
  console.log("this is output", output_info)
  $('#results').html(output_info) then I throw this inside my results tab. 
array.forEach(函数(elem){
输出信息+=`
  • ` elem.metadata.forEach(函数(trip){ 输出信息+=每个元数据html(trip) }) 输出信息+=` ` }) log(“这是输出”,输出信息) $('#results').html(output_info),然后我将其放入我的results选项卡中。
    看起来像这样

     <div class="row" id="results"></div>
    
    
    
    每个\u设备\u html接收一个元数据对象

    function each_metadata_html(elem){
      return `<div class="item">
              <p>`+elem.name+` </p>
          </div>`
    }
    
    函数每个\u元数据\u html(elem){
    返回`
    `+元素名称+`

    ` }
    问题: 代码不显示旋转木马;但实际上它看起来是这样的:

    array = [
    {
        id:1,
        metadata:['object','object']
    },
    {
        id:2,
        metadata:['object','object']
    },
    {
        id:3,
        metadata:['object','object']
    }]
    

    我想做的是;对于上面给定的数组:


    我希望能够。在本例中,我希望能够在一个页面中显示3个不同的旋转木马;然后carousel每个幻灯片有2个元数据。

    使用ctrl+M键做什么?如果您尝试作为静态HTML而不使用后期绑定,carousel工作吗。。可能超过渲染点..它们确实显示;它们只是叠加在一起..您是否能够使用下面编辑器中的Snippet工具或JSFIDLE、codepen中的Snippet工具重现问题(两者都有引导默认值)?