javascript-JS如何从循环单独动作创建单独的按钮?

前端之家收集整理的这篇文章主要介绍了javascript-JS如何从循环单独动作创建单独的按钮? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我使用jQuery的循环,并创建循环以创建一些具有值的框.

问题是,我创建了一个盒子,对于这个盒子,我从数组中获取值,并且对于每个值,我都必须采取行动,例如调用allert.

我的代码

  1. var mokData = [
  2. { category: "Material",id: 'Code0-1',name: 'Brakedown of machine' },{ category: "Material",{ category: "Tool",name: 'Brakedown of line' },name: 'Brakedown of line' }
  3. ];
  4. $.each(mokData,function (i) {
  5. var templateString = '<article class="card"><h2>' + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].id + '</p><button class="tes">Start</button></article>';
  6. $('#favoriteCards').append(templateString);
  7. });
  8. $(".tes").on("click",function () {
  9. alert("Click");
  10. });
  1. .cards {
  2. margin: -1rem;
  3. }
  4. .card {
  5. width: 220px;
  6. float: left;
  7. margin: 1rem;
  8. border: 1px solid #d3d3d3;
  9. padding: 20px;
  10. border-radius: 5px;
  11. background-color: white;
  12. }
  13. @supports (display: grid) {
  14. .cards {
  15. margin: 0;
  16. }
  17. .cards {
  18. display: grid;
  19. grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  20. grid-gap: 1rem;
  21. }
  22. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <main class="cards">
  3. <div id="favoriteCards"></div>
  4. </main>

如您所见,我对按钮有操作,但是这不正确,因为我希望使用数组中的数据为单独的按钮单独发出警报.

最佳答案
将要作为警报的数据添加custom attribute(data-*)到元素,并在需要警报时获取它.除了jQuery.each中的回调外,第二个参数是添加第二个参数(甚至可以使用)的元素,并将其用于引用元素,而不是通过索引获取.

  1. var mokData = [{"category":"Material","id":"Code0-1","name":"Brakedown of machine"},{"category":"Material",{"category":"Tool","name":"Brakedown of line"},"name":"Brakedown of line"}];
  2. $.each(mokData,function() {
  3. var templateString = '<article class="card"><h2>' + this.category + '</h2><p>' + this.name + '</p><p>' + this.id + '</p><button class="tes" data-alert="' + this.name + '">Start</button></article>';
  4. $('#favoriteCards').append(templateString);
  5. });
  6. $(".tes").on("click",function() {
  7. alert($(this).data('alert'));
  8. });
  1. .cards {
  2. margin: -1rem;
  3. }
  4. .card {
  5. width: 220px;
  6. float: left;
  7. margin: 1rem;
  8. border: 1px solid #d3d3d3;
  9. padding: 20px;
  10. border-radius: 5px;
  11. background-color: white;
  12. }
  13. @supports (display: grid) {
  14. .cards {
  15. margin: 0;
  16. }
  17. .cards {
  18. display: grid;
  19. grid-template-columns: repeat(auto-fit,1fr));
  20. grid-gap: 1rem;
  21. }
  22. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <main class="cards">
  3. <div id="favoriteCards"></div>
  4. </main>

猜你在找的HTML相关文章