[英]How to recup the .data of an element that has been clicked ? (javascript, not working atm)
i'm currently working on an online project which is a Tarot game (card game) in single page application. 我目前正在开发一个在线项目,该项目是单页应用程序中的塔罗牌游戏(纸牌游戏)。 And the thing is, in order to play, the player needs to click on a card, which is here in my case an img, and it should execute a fonction getting thedatas that I put in earlier when I dynamically generated the cards.
事实是,为了玩游戏,玩家需要单击一张卡(在我的情况下为img),并且应该执行功能以获取我在动态生成卡时输入的数据。
However, when I try to click, it calls the function but I get a console.log() undefined instead of the awaited data. 但是,当我尝试单击时,它调用了该函数,但未定义console.log()而不是等待的数据。
Here is my code generating a card : 这是我生成卡的代码:
let ajouterImageCarte = function (carte, destination) { let img = $('<img />'); $(destination).append( img.attr("src", carte.url) .attr("class", "imageCarte") .data("valeur", carte.valeur) .data("couleur", carte.couleur) .data("nom", carte.nom) .click(clickImgage) ); };
And here is the function called after a click : 这是单击后调用的函数:
let clickImgage = function () { $.ajax({ url: '/php/json/getTourEtatJeu.php' }) .done(function (dataEtat) { if (dataEtat.isMonTour && "chien" === dataEtat.etatPartie) { console.log("yes"); if (1<2) { let nom = $(this).data("nom"); console.log(nom); let carte = new Carte(nom); chien.push(carte); $(this).fadeOut(function () { let img = $('<img />'); $('#plateau').append( img.attr("src", carte.url) .attr("class", "imageCarte") .data("valeur", carte.valeur) .data("couleur", carte.couleur) .data("nom", carte.nom) .click(clickImgage) ); }) } else { console.log("no"); } } else if (dataEtat.isMonTour && "jeuEnCours" === dataEtat.etatPartie) { } }) .fail(function () { alert("Problème survenu lors du clic sur une carte !!"); }); return false; };
The important part of the function is at the beginning, after the ajax call, where I try to console.log(nom), which is let nom = $(this).data("nom");. 该函数的重要部分是在ajax调用之后的开始,我尝试在console.log(nom)中进行操作,即让nom = $(this).data(“ nom”);。
I've already tried some stuff and looked in stack overflow questions and other websites but I didn't manage to find an answer for this strange problem. 我已经尝试过一些东西,并在堆栈溢出问题和其他网站中进行了研究,但是我没有找到解决这个奇怪问题的答案。 Besides, I could really use some help right now because I need to finish this project today and this point is the only point that doesnt work.
此外,我现在真的可以使用一些帮助,因为我今天需要完成此项目,而这一点是唯一行不通的。
Thank you in advance :) 先感谢您 :)
there are some not understandable for me issues with retrieving by .data()
method with jquery 对于我来说,通过
.data()
方法使用jquery检索存在一些无法理解的问题
.data()
works fine .data()
可以正常工作 .attr("data-valeur")
method with 'data' option .attr("data-valeur")
方法 .dataset
property from an html element .dataset
属性 In your callback, this
doesn't refer to the clicked image as you expect. 在您的回调中,
this
并不像您期望的那样引用单击的图像。 See the answers here : $(this) inside of AJAX success not working 在这里查看答案: AJAX成功内的$(this)无法正常工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.