使用JQuery比较动态创建的元素的数据属性

Question

I'm making a game where after you click an image it will shuffle the array and repopulate the DOM. 我正在做一个游戏，在您单击图像后，它会重新排列数组并重新填充DOM。 The idea is that you can't click the same image twice even though the images in the array are shuffled. 这样的想法是即使阵列中的图像被混洗，您也不能两次单击同一图像。

HTML 的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 . #testDiv会在页面加载时填充，并且每次单击时都会#testDiv排列数组并重新填充#testDiv 。

Each image in the object has a name property related to the character's image. 对象中的每个图像都有一个与角色图像相关的name属性。 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 的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. 我正在将name属性分配给数据属性，并想将数据属性与click函数进行比较。

When I console.log($(this).data()); 当我console.log($(this).data()); I get a blank object with ___proto___ : Object and not the data attribute. 我得到一个带有___proto___ : Object的空白对象___proto___ : Object而不是data属性。 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? 如何将变量内的数据属性与另一个元素的数据属性进行比较？

Answer 1

You will need to send the data attributes name for your console.log function. 您将需要为console.log函数发送数据属性名称。

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>

使用JQuery比较动态创建的元素的数据属性

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-12-13 03:51:30

使用JQuery比较动态创建的元素的数据属性

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-12-13 03:51:30

解决方案1
2 已采纳 2017-12-13 03:51:30