Compare data attributes of dynamically created elements with JQuery
Question
I'm making a game where after you click an image it will shuffle the array and repopulate the DOM. The idea is that you can't click the same image twice even though the images in the array are shuffled.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<!-- Tribute to Tom Whalen for the awesome Transformers pictures -->
<button id="shuffleButton" type="submit">Shuffle</button>
<div id="test"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="app.js">
</script>
</body>
</html>
The #testDiv is populated on page load and each time you click it shuffles the array and repopulates #testDiv .
Each image in the object has a name property related to the character's image. I'm using Transformers.
Here's an example from the array of objects I am using.
var images = [
{
name: "bumblebee",
image: "assets/images/bumblebee.jpg"
},
{
name: "frenzy",
image: "assets/images/frenzy.jpg"
}];
JavaScript
/*Working for loop through images array */
function loop() {
for (var i =0; i < images.length; i++) {
var testImage = $('<img class="images">')
.attr('src', `${images[i].image}`)
.attr('data', `${images[i].name}`);
$(testDiv).append(testImage);
};
};
loop();
function Shuffle() {
images.sort(function(a, b) {
return 0.5 - Math.random()
});
loop();
};
$("#shuffleButton").on('click', function(){
$(testDiv).empty();
Shuffle();
console.log(images);
});
var count = 0;
$(document).on('click', '.images', function() {
$(testDiv).empty();
Shuffle();
console.log($(this).data());
});
I am assigning the name property to a data attribute and want to compare the data attributes with a click function.
When I console.log($(this).data()); I get a blank object with ___proto___ : Object and not the data attribute. How would I grab the data attribute? How woinI then store that into a variable? How would I compare that data attribute inside of a variable to another element's data attribute?
1 answers
solution1
2 ACCPTED 2017-12-13 03:51:30
You will need to send the data attributes name for your console.log function.
console.log($(this).data('name'));
I have attached an example below.
$(document).on('click', '#div', function() { alert($(this).data('id')); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div" data-id="test" >hello</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.