0
私はゲームを作っています。画像をクリックすると、配列がシャッフルされ、DOMが再び埋め込まれます。アレイ内の画像がシャッフルされていても、同じ画像を2回クリックすることはできません。動的に作成された要素のデータ属性とJQueryを比較します
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プロパティを割り当て、クリック機能とデータ属性を比較したいのです。
I console.log($(this).data());は私が___proto___ : Objectとされていないデータの属性を持つ空白のオブジェクトを取得します。 データ属性はどのように取得できますか？ これを変数に格納するにはどうしたらいいですか？ 変数内のデータ属性を他の要素のデータ属性と比較するにはどうすればよいですか？
VAR testDiv = $（ '＃テスト'）;私は私のファイルをコピーしたときに私はそれをつかまなかったと思います。 testDivはグローバルに定義されています –