[英]How to target a html5 data attribute with jQuery?
I have created a modal that is triggered when I click on an image from a gallery. 我创建了一个模式,当我单击图库中的图像时会触发该模式。
<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/apple.jpg" src="assets/gallery/thumbs/tn_apple.jpg" alt="thumbnail">
<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/orange.jpg" src="assets/gallery/thumbs/tn_orange.jpg" alt="thumbnail">
<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/banana.jpg" src="assets/gallery/thumbs/tn_banana.jpg" alt="thumbnail">
I would like to further this function by getting the data-fullsizeImg file and set that to a variable. 我想通过获取data-fullsizeImg文件并将其设置为变量来进一步实现此功能。 Then with that variable set create an tag within the modal window with a src of that data-fullsizeImg.
然后在设置了该变量的情况下,在模式窗口中使用该data-fullsizeImg的src创建一个标签。 I cannot seem to target the attribute though.
我似乎无法定位该属性。 I have tried to use this
我试图用这个
function createModal() {
var fullsize = $(this).attr('data-fullsizeImg');
console.log($(this).attr('data-fullsizeImg'));
$('#modal').css({
'display': 'block'
});
}
I have also tried this 我也尝试过
function createModal() {
var fullsize = $(this).data('fullsizeImg');
console.log($(this).attr('data-fullsizeImg'));
$('#modal').css({
'display': 'block'
});
}
When I do this I get an undefined in the console. 当我这样做时,我在控制台中得到一个未定义的信息。 What am I doing wrong?
我究竟做错了什么?
This is what I am using to trigger the function from within HTML if that makes any difference. 如果有任何不同,这就是我用来从HTML触发函数的方法。 It does the trick for showing the modal I created
它可以显示我创建的模态
$(".galleryThumbnail").click(function() {
createModal();
});
this
inside the createModal
does not refer to the clicked element, so your script won't work. this
里面createModal
不指点击的元素,让你的脚本将无法工作。
You need to pass the clicked element reference to createModal
您需要将单击的元素引用传递给
createModal
function createModal(el) { var fullsize = $(el).data('fullsizeImg'); console.log($(el).attr('data-fullsizeImg')); $('#modal').css({ 'display': 'block' }); } $(".galleryThumbnail").click(function() { createModal(this); });
You can use data()
method to access custom data attributes. 您可以使用
data()
方法访问自定义数据属性。 If you need to access this inside the function then pass the this
instance as a parameter. 如果您需要在函数内部访问此函数,则
this
实例作为参数传递。
function createModal(ele) { var fullsize = $(ele).data('fullsizeimg'); console.log($(ele).data('fullsizeimg')); $('#modal').css({ 'display': 'block' }); } $(".galleryThumbnail").click(function() { createModal(this); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/apple.jpg" src="assets/gallery/thumbs/tn_apple.jpg" alt="thumbnail"> <img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/orange.jpg" src="assets/gallery/thumbs/tn_orange.jpg" alt="thumbnail"> <img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/banana.jpg" src="assets/gallery/thumbs/tn_banana.jpg" alt="thumbnail">
Or 要么
$(".galleryThumbnail").click(function() { var fullsize = $(this).data('fullsizeimg'); console.log($(this).data('fullsizeimg')); $('#modal').css({ 'display': 'block' }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/apple.jpg" src="assets/gallery/thumbs/tn_apple.jpg" alt="thumbnail"> <img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/orange.jpg" src="assets/gallery/thumbs/tn_orange.jpg" alt="thumbnail"> <img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/banana.jpg" src="assets/gallery/thumbs/tn_banana.jpg" alt="thumbnail">
fullsizeimg
in lower
fullsizeimg
All attribute names on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents.
HTML文档中HTML元素上的所有属性名称都会自动使用ASCII小写字母,因此对ASCII大写字母的限制不会影响此类文档。
Taken from : http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes 摘自: http : //www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
There are two ways of solving this: 有两种解决方法:
event
arguement. event
争论。 function createModal(img) { // get it here
var fullsize = $(img).data('fullsizeImg'); // use here
console.log($(img).attr('data-fullsizeImg')); // and here
$('#modal').css({
'display': 'block'
});
}
$(".galleryThumbnail").click(function() {
createModal(this); // <----pass this here
});
function createModal(e) { // pass e == event
var fullsize = $(e.target).data('fullsizeImg'); // e.target is the clicked element.
console.log($(e.target).attr('data-fullsizeImg')); // and here
$('#modal').css({
'display': 'block'
});
}
$(".galleryThumbnail").click(function() {
createModal();
});
An alternative way to previous answers is this: 先前答案的另一种方法是:
createModal.call(this);
Now in function createModel, this
is inherited from the caller function and you may use $(this)
as a reference. 现在在函数createModel中,
this
是从调用者函数继承的,您可以使用$(this)
作为引用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.