我使用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如何从循环单独动作创建单独的按钮? 所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)