[英]jQuery click handler not working
我无法使用以下功能。
单击.image类时,将替换3个div中的内容(gallerytext,image和thumbset)。 我已经尝试使它工作好几天了,但我无法弄清楚自己在做什么错。
我的代码:
// Init load
$(document).ready(function() {
var $doc = $(document.body);
var text = $('#gallerytext1').html(); //blank divs are filled with content on page load
$('#gallerytext').html(text);
var thumbset = $('#thumbset1').html();
$('#thumbset').html(thumbset);
$('#image').html('<img src="images/edwards1.jpg" border="0"/>');
//click handler
$doc.on("click",".image",function(){
var image=$(".image").attr("rel");
var imid=$(".image").attr("data");
var text=$('#gallerytext'+imid).html();
var thumbset=('#thumbset'+imid).html();
$('#debug').html(imid);
$('#gallerytext').fadeIn('slow');
$('#gallerytext').html(text);
$('#thumbset').fadeIn('slow');
$('#thumbset').html(thumbset);
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});
初始内容加载正常,但我无法使点击处理程序正常工作。 具有.image类的对象的格式如下:
<a href="#" rel="images/edwards2.jpg" data="1" class="image image2"><img src="images/edwardsthumb2.jpg" class="thumb" border="0"/></a>
任何帮助将不胜感激,谢谢。
这些可能是您遇到问题的行:
var image=$(".image").attr("rel");
var imid=$(".image").attr("data");
$(".image")
选择具有image
类的所有元素。 您只需要单击的那个,因此使用this
来引用它:
var image = $(this).attr("rel");
var imid = $(this).attr("data");
另外,请勿组成诸如data
类的自定义属性。 HTML5引入了用于存储自定义数据类型的data-
属性,因此请使用它们:
data-number="1"
您可以使用.data()
方法访问它:
var imid = $(this).data('number');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.