我对JavaScript / jQuery不太满意,并且在执行非常基本的任务时遇到了很多麻烦。我有一个img
,点击它后,应该会给我父亲div
的ID。
这是标记:
<div id="client-1">
<img src="~/Content/plus.ico" alt="plus" onclick="ButtonExpandClick()" />
</div>
这是javascript:
<script type="text/javascript">
function ButtonExpandClick() {
alert($(this).parent().attr("id"));
}
</script>
点击图片会给我一个提示“未定义”的警告,但是当我检查页面时,我可以清楚地看到div
的ID为“client-1”。我必须在这里遗漏一些简单的东西。我也尝试使用.closest
以及将this
传递给函数但没有运气。谢谢你的帮助!
答案 0 :(得分:3)
不要将onclick
属性用于事件。您正在使用jQuery,“正确”绑定事件。
为图像添加一个类:
<img src="~/Content/plus.ico" alt="plus" class="icon" />
然后绑定事件:
$(function(){
$('.icon').click(function(){
alert($(this).parent().attr("id"));
});
});
答案 1 :(得分:1)
如果您使用jQuery挂钩click事件而不是内联,那么您将自动传入this
:
请注意,您必须为图片添加id
或为其找到另一个选择器。
jQuery(document).ready(function() {
jQuery("#myImg").click(ButtonExpandClick);
});
答案 2 :(得分:0)
您需要传递this
onclick="ButtonExpandClick(this)"
<强> JS 强>
function ButtonExpandClick(elem) {
alert($(elem).parent().attr("id"));
}
声明内联事件也是一个坏主意。使用javascript直接附加事件。
<script>
$(function() {
$('#client-1 img').click(function() {
alert($(this).parent().attr("id"));
});
});
</script>
答案 3 :(得分:0)
您必须使用jquery.click或使用函数发送元素。像sendme(这)。
答案 4 :(得分:0)
您可以使用以下内容:
$(function() {
$('img').on('click', function(e) {
var id = this.parentNode.id; //Using javascript to access id is faster.
alert(id);
});
});
工作的示例
建议将此图像放入容器中。并将其更改为。性能更好。
$(function(){
var images = $('#container').find('img');
images.on('click', function(e) {
var id = this.parentNode.id; //Using javascript to access id is faster.
alert(id);
});
});
答案 5 :(得分:0)
更简单的是你可以尝试使用绑定:
<div id="client-1">
<img src="~/Content/plus.ico" alt="plus" />
</div>
<script>
$(function() {
$('img').on('click', function(){
// Two ways to do the same thing
alert(this.parentNode.id);
alert($(this).parent()[0].id);
});
});
</script>