我有一个循环,用几个项填充页面。每个项目都有:
作为测试,我编写了一个函数,用于在单击按钮时返回ID和计划名称。但是,仅为列表中的所有项目返回第一个项目的ID和计划名称。当我查看HTML时,隐藏字段中会填充正确的唯一ID,因此我很难确定单击时返回正确ID的原因。
请参阅以下代码:
EJS:
<% for (var i = 0; i < plans.length; i++) {%>
<div class="col-md-4" data-shuffle="item" data-groups="audio,video">
<form>
<a class="hover-move-up" href="#">
<img src="/img/portfolio/1.jpg" alt="screenshot">
<div class="text-center pt-5">
<h5 class="fw-5001 mb-0"><%= plans[i].plan_name %></h5>
<small class="small-5 text-lightest text-uppercase ls-2"><%= plans[i].regular_plan_cost %> | <%= plans[i].huddl_plan_cost %></small>
<br>
<input id="planID" name="ID" type="hidden" value="<%= plans[i]._id %>">
<input id="planName" name="planName" type="hidden" value="<%= plans[i].plan_name %>">
<button type="submit" class="btn btn-primary">Join</button>
</form>
</div>
</a>
</div>
<% } %>
JS:
var ID = document.getElementById("planID").value;
var planName = document.getElementById("planName").value;
$('button').on('click', function() {
alert(ID + ' ' + planName);
})
任何帮助搞清楚这一点将不胜感激。
使用此代码段。
<div class="text-center pt-5">
<h5 class="fw-5001 mb-0"><%= plans[i].plan_name %></h5>
<small class="small-5 text-lightest text-uppercase ls-2"><%= plans[i].regular_plan_cost %> | <%= plans[i].huddl_plan_cost %></small>
<br>
<input id="planID_<%= i %>" name="ID" type="hidden" value="<%= plans[i]._id %>">
<input id="planName_<%= i %>" name="planName" type="hidden" value="<%= plans[i].plan_name %>">
<button data-ref="<%= i %>" class="btn btn-primary">Join</button>
</form>
</div>
</a>
</div>
我刚刚在IDS中添加了一个增量器:
<input id="planID_<%= i %>"
<input id="planName_<%= i %>"
<button data-ref="<%= i %>"
所以,现在你拥有了独特的ID。你还需要javascript来“提醒”吗?
这是一些额外的代码。我没有测试这个,我的jQuery生锈了,但希望这会给你你需要的东西
使用Javascript:
$('button').each(function() {
$(this).on('click', function() {
myFN($(this).attr("data-ref"));
})
});
function myFN(val) {
var ID = document.getElementById("planID_" + val).value;
var planName = document.getElementById("planName_" + val).value;
console.log("VALUES: ", ID, planName);
}
看看你所拥有的表格标签,它不是正确的壁橱。你需要在div和a标签下移动它。也许这会解决这个问题。