jQuery onclick未获得正确的值
jQuery onclick not getting proper values
我正在尝试在单击事件中获取图像 ALT 值,但它无法正常工作,并且在单击时显示相同的值(图像 ALT)。
这是代码:
.HTML:
<a href="//cdn.shopify.com/s/files/1/0720/9527/products/MDM02-south-east-postcode-district-map-detail-large_ee8e2826-b33b-4c77-83b2-f162df33ec33_large.gif?v=1420644155" class="product-photo-thumb" title="Map 1">
<img id="imgVariants" src="//cdn.shopify.com/s/files/1/0720/9527/products/MDM02-south-east-postcode-district-map-detail-large_ee8e2826-b33b-4c77-83b2-f162df33ec33_compact.gif?v=1420644155" alt="Map 1">
</a>
<a href="//cdn.shopify.com/s/files/1/0720/9527/products/png_large.png?v=1420644163" class="product-photo-thumb" title="Map 2">
<img id="imgVariants" src="//cdn.shopify.com/s/files/1/0720/9527/products/png_compact.png?v=1420644163" alt="Map 2">
</a>
Javascript/jQuery
$(document).ready(function(){
$('.product-photo-thumb').on("click", function (e) {
e.preventDefault();
alert(document.getElementById("imgVariants").alt);
});
});
>> js小提琴链接
我错过了什么吗?
PS:我知道ID必须是唯一的,但我想要一个即使没有唯一ID也可以工作的解决方案。
有两个元素带有same Id
(不应该),删除它们,你应该使用类似 e.target
这是一个工作示例.. http://jsfiddle.net/83cyuozz/1/
$(document).ready(function(){
$('.product-photo-thumb').on("click", function (e) {
e.preventDefault();
alert(e.target.alt);
});
});
试试这段代码
$(document).ready(function(){
$('.product-photo-thumb').on("click", function (e) {
e.preventDefault();
alert($(this).find('img').attr('alt'));
});
});
演示
注意 ID
必须是唯一的。
这是一个工作示例,其中可以有多个具有相同 ID 的元素,但它可以正常工作: JSFIDDLE
$(document).ready(function(){
$("body").on("click",".product-photo-thumb", function (e) {
e.preventDefault();
alert($(this).children("img").attr("alt"));
});
});
相关文章:
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 选择onclick事件jquery
- OnClick/Onhover Javascript/jquery
- jquery Onclick函数带有导致双击的回调排序函数
- jquery onclick过早地触发(?)
- Jquery Onclick将数据发送到新打开的窗口
- Jquery post and onclick
- 使用jQuery动态添加onClick事件
- jQuery将td onclick值传递到其他表
- 多个OnClick JQuery事件正在激发
- img var onClick Jquery
- 我的函数不触发onclick jquery
- 链接href与图像onclick jquery
- onclick JQuery函数在HTML标签中设置日期选择器值为不同的日期
- 在onclick jquery中传递多个元素
- 防止onclick jquery函数允许onclick ajax提交
- 保存并恢复"onclick"jQuery对象的操作
- 如何调用具有动态数据的onclick jquery函数,Asp.net Mvc5
- 切换按钮操作OnClick-JQuery+Rails
- 如何添加阈值onclick() jQuery