使用jquery查找单击事件的值。每次单击delete
类时,hidden
变量都会返回第一个hdid
,而不是单击的hdid
。当我使用this
时,它会返回整个delete
类,但我只需要select类的"hdid"。问题是如何使用this
将变量设置为选定的hdid
<form id="frmDelete" method="post" action="delete-class.php">
<ul id="class">
<li>
<div class="delete">ED 123-123<input type="hidden" name="hdid" id="hdid" value="6"/></div>
</li>
<li>
<div class="delete">EDU 121-101<input type="hidden" name="hdid" id="hdid" value="7"/></div>
</li>
<li>
<div class="delete">STU 120-456<input type="hidden" name="hdid" id="hdid" value="8"/></div>
</li>
</ul>
</form>
</div>
<script>
$(function() {
$(".delete").click(function() {
var hidden = $('#hdid').val();
console.log(hidden);
console.log(this);
});
});
</script>
$(function() {
$(".delete").click(function() {
var hidden = $(this).find("hidden").val();
console.log(hidden);
});
});
id应该是唯一的
$(function() {
$(".delete").click(function() {
var $div = $(this);
console.log($div.children("input").prop("name"));
});
});
在同一页面上有多个ID为hdid的元素。具有相同ID的多个元素不是一个好主意。
由于您使用$('#hdid')
来搜索元素,所以您总是得到第一个。
id=""
应该是唯一的,如果您希望多个元素成为hdid
,请使用class
属性。正是这个导致了你的问题。所以"修复"html像
<div class="delete">ABC<input type="text" name="hdid1" class="hdid" />
像这样的js
$(function() {
$(".delete").click(function() {
var hidden = $(this).children('input.hdid').val();
console.log(hidden);
console.log(this);
});
});
您的问题是有多个具有相同ID的元素。这是不允许的,因此当被问及ID为"hdid"的元素的值时,jQuery只会获取它找到的第一个元素的值。
这里的一个可能的解决方案是只有一个隐藏的输入字段,并在单击特定项目时更新该字段的值,然后提交表单。您可以使用data-*
属性存储要删除的项目的ID(假设您使用的是HTML5):
<form id="frmDelete" method="post" action="delete-class.php">
<input type="hidden" name="hdid" id="hdid" />
<ul id="class">
<li>
<div class="delete" data-id="6">ED 123-123</div>
</li>
<li>
<div class="delete" data-id="7">EDU 121-101</div>
</li>
<li>
<div class="delete" data-id="8">STU 120-456</div>
</li>
</ul>
</form>
<script>
$(function() {
$(".delete").click(function() {
$('#hdid').val($(this).data('id'));
var hidden = $('#hdid').val();
console.log(hidden);
console.log(this);
});
});
</script>