英文:
How to use dynamic golang html template id with javascript?
问题
你好，我可以帮你翻译。以下是翻译好的内容：
嗨，我有一个带有动态id的html图像按钮，它在golang模板中的范围内。我需要在其中添加一个javascript函数。但问题是，我如何在javascript中使用这个动态id？
我的HTML代码：
{{range $i, $e := .Process}}
<input id="id{{.}}" type="image" src="/images/icons/pencil.png" alt="edit" width="15" height="15">
{{end}}
JavaScript代码：
<script type="text/javascript">
$().ready(function() {
$('#id{{.}}').click(function() {
$('#hidebody').toggle();
});
});
</script>
如何解决这个问题？有没有更好的方法来做到这一点？
英文:
Hi I have a html image button with dynamic id inside range in golang template. I need to add a javascript function to it. But the problem is that how could I use this dynamic Id in javascript?
My HTML
{{range $i, $e := .Process}}
<input id="id{{.}}" type="image" src="/images/icons/pencil.png" alt="edit" width="15" height="15">
{{end}}
JavaScript
<script type="text/javascript">
$().ready(function() {
$('#id{{.}}').click(function() {
$('#hidebody').toggle();
});
});
</script>
How to solve this? Is there any better way to do this?
答案1
得分: 2
给这些按钮添加一个类。
{{range $i, $e := .Process}}
<input id="{{.}}" class="img-buttons" type="image" src="/images/icons/pencil.png" alt="edit" width="15" height="15">
{{end}}
在 JavaScript 中，你可以这样做：
$(".img-buttons").click(function() {
$(this).attr("id"); // 获取 Id
});
如果更适合你的话，你也可以使用 HTML 的 data 属性。
HTML：
{{range $i, $e := .Process}}
<input data-id="{{.}}" class="img-buttons" type="image" src="/images/icons/pencil.png" alt="edit" width="15" height="15">
{{end}}
JS：
$(".img-buttons").click(function() {
$(this).data("id"); // 获取 Id
});
英文:
Give those buttons a class.
{{range $i, $e := .Process}}
<input id="{{.}}" class="img-buttons" type="image" src="/images/icons/pencil.png" alt="edit" width="15" height="15">
{{end}}
In javascript you can do,
$(".img-buttons").click ( function() {
$(this).attr( "id" ); // get Id
});
Instead of the id you can use html data attributes if that suits you better.
HTML:
{{range $i, $e := .Process}}
<input data-id="{{.}}" class="img-buttons" type="image" src="/images/icons/pencil.png" alt="edit" width="15" height="15">
{{end}}
JS:
$(".img-buttons").click ( function() {
$(this).data( "id" ); // get Id
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论