如何在循环中应用工具栏.js

How to apply toolbar.js in a loop

本文关键字：应用 工具栏 js 循环      更新时间：2023-09-26

我正在尝试使用工具栏.js，但处于循环中。下面是stackoverlow 的一个例子

这是我试图应用的代码，在这段代码中，我有一个主容器，我在其中动态创建了许多div，并试图在这些div中放入tooblar。请告诉我如何使它工作，或者我做错了什么。P

提前谢谢。

HTML:

<link href="https://paulkinzett.github.io/toolbar/css/documentation.css" rel="stylesheet"/> <link href="https://paulkinzett.github.io/toolbar/css/jquery.toolbar.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://paulkinzett.github.io/toolbar/js/jquery.toolbar.min.js"></script>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto">
  <h1 id=aa>
  </h1>
</div>

JS:

for (var id = 0; id <= 10; id++) {
  var divTool = $('<div id=toolbar-options' + id + ' class="hidden"><a href="#" id=plane' + id + '><i class="fa fa-plane"></i></a><a href="#" id=car' + id + '><i class="fa fa-car"></i></a><a href="#" id=bycicle' + id + '><i class="fa fa-bicycle"></i></a></div><div data-toolbar="toolbar-options" data-toolbar-animation="flip" class="btn-toolbar feature-toolbar btn-toolbar-primary text-center" data-toolbar-style="primary" id=button' + id + '><i class="fa fa-cog" style="position: relative"></i></div>');
  var div = document.createElement('div'),
        h = document.createElement('h3')
    divId = "id" + id,
    hId = "idh" + id,
    container = document.getElementById("container");
  div.setAttribute("id", divId);
  h.setAttribute("id", hId);
  container.appendChild(div);
  h.innerHTML = id;
  $(div).append(h);
  $(div).append(divTool);
}
$('#' + 'button' + id).toolbar({
  content: '#toolbar-options',
  position: 'top',
  style: 'primary',
  event: 'click',
  hideOnClick: true
})
$('#' + 'button' + id).on('toolbarItemClick',
  function(event, buttonClicked) {
    alert(buttonClicked.id);
  }
)

这就是您想要的。

JS:

for (var id = 0; id <= 10; id++) {
    var div=$('<div class="btn-toolbar" style="margin:5px;"></div>');
    $('#container').append(div);
  $(div).toolbar({
    content: '#toolbar-options',
  });
}

HTML:

<div id="container" style="width: 550px; margin: 0 auto">
</div>
<div id="toolbar-options" class="hidden">
    <a href="#"><i class="fa fa-plane"></i></a>
    <a href="#"><i class="fa fa-car"></i></a>
    <a href="#"><i class="fa fa-bicycle"></i></a>
  </div>

Js出价

相关文章：