Question

我正在创建一个游戏，在你点击一个图像后，它会洗牌并重新填充DOM。我们的想法是，即使数组中的图像被洗牌，您也无法两次点击相同的图像。

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>

#testDiv 会在页面加载时填充，每次点击它都会对数组进行洗牌并重新填充 #testDiv 。

对象中的每个图像都具有与角色图像相关的名称属性。我正在使用变形金刚。

这是我正在使用的对象数组中的一个示例。

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());
});

我将name属性分配给data属性，并希望将数据属性与click函数进行比较。

当我 console.log($(this).data()); 时，我得到一个空白对象 ___proto___ : Object ，而不是数据属性。我如何获取数据属性？ woinI然后将它存储到变量中？如何将变量内部的数据属性与另一个元素的数据属性进行比较？

Answer 1

您需要为console.log函数发送数据属性名称。

console.log($(this).data('name'));

我在下面附上了一个例子。

$(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 个答案: