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

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

概述我使用jQuery的循环,并创建循环以创建一些具有值的框.问题是,我创建了一个盒子,对于这个盒子,我从数组中获取值,并且对于每个值,我都必须采取行动,例如调用allert.我的代码:var mokData = [ { category: 'Material', id: 'Code0-1', name: 'Brakedown of machine' }, {

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

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

我的代码:

var mokData = [{ category: "Material",ID: 'Code0-1',name: 'Brakedown of machine' },{ category: "Material",{ category: "Tool",name: 'Brakedown of line' },name: 'Brakedown of line' }];$.each(mokData,function (i) {var templateString = '<article ><h2>' + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].ID + '</p><button >Start</button></article>';    $('#favoriteCards').append(templateString);});$(".tes").on("click",function () {    alert("Click");});
.cards {    margin: -1rem;}.card {    wIDth: 220px;    float: left;    margin: 1rem;    border: 1px solID #d3d3d3;    padding: 20px;    border-radius: 5px;    background-@R_419_6004@: white;}@supports (display: grID) {    .cards {        margin: 0;    }    .cards {        display: grID;        grID-template-columns: repeat(auto-fit,minmax(300px,1fr));        grID-gap: 1rem;    }}
<script src="https://cdnjs.cloudflare.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script><main >    <div ID="favoriteCards"></div></main>

如您所见,我对按钮有 *** 作,但是这不正确,因为我希望使用数组中的数据为单独的按钮单独发出警报.最佳答案将要作为警报的数据添加为custom attribute(data-*)到元素,并在需要警报时获取它.除了jQuery.each中的回调外,第二个参数是添加第二个参数(甚至可以使用)的元素,并将其用于引用元素,而不是通过索引获取.

var mokData = [{"category":"Material","ID":"Code0-1","name":"Brakedown of machine"},{"category":"Material",{"category":"Tool","name":"Brakedown of line"},"name":"Brakedown of line"}];$.each(mokData,function() {  var templateString = '<article ><h2>' + this.category + '</h2><p>' + this.name + '</p><p>' + this.ID + '</p><button  data-alert="' + this.name  + '">Start</button></article>';  $('#favoriteCards').append(templateString);});$(".tes").on("click",function() {  alert($(this).data('alert'));});
.cards {  margin: -1rem;}.card {  wIDth: 220px;  float: left;  margin: 1rem;  border: 1px solID #d3d3d3;  padding: 20px;  border-radius: 5px;  background-@R_419_6004@: white;}@supports (display: grID) {  .cards {    margin: 0;  }  .cards {    display: grID;    grID-template-columns: repeat(auto-fit,1fr));    grID-gap: 1rem;  }}
<script src="https://cdnjs.cloudflare.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script><main >  <div ID="favoriteCards"></div></main>
总结

以上是内存溢出为你收集整理的javascript-JS如何从循环单独动作创建单独的按钮? 全部内容,希望文章能够帮你解决javascript-JS如何从循环单独动作创建单独的按钮? 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1105560.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存