表示している画像を条件分岐に組み込みたい

二つの画像を交互に出してその画像だと思った方のボタンを押してボタンと画像が一致していた場合成功というふうに条件分岐をしたいのですが、表示している画像をどのように条件分岐に表せば良いかわからず行き詰まっています。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <!-jQueryのCDN->
5 どっち？？
6  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
7  
8</head>
9<body>
10  
11  <p></p>
12  <div class='image-wrapper1' style="width: 100%; height:400px;">
13  <div class='imageArea'  style="width:100%; max-width:600px; margin:0 auto;">
14  <img src="画像のパス"
15  style="display:none; position:absolute;"id='img1'>
16  <img src="画像のパス"
17  style="display:none;position: absolute;"id='img2'>
18  </div>
19  </div>
20
21  <button id="start"> スタート</button>
22  <button id="a">img1</button>
23  
24  <div id="result"></div>
25  
26
27  <script type="text/javascript" src="Bingo.js">
28  </script>
29
30</body>
31</html>
32

Javascript
1const start = document.getElementById('start');
2const a = document.getElementById('a');
3const img1 = document.getElementById('img1');
4let timerId;
5
6function adding(){ $('.imageArea img:first').addClass('active').show();}
7
8var changeImg = function(){
9    var $active = $('.imageArea img.active');
10    var $next = $active.next('img').length?$active.next('img'):$('.imageArea img:first');
11    $active.fadeOut(100).removeClass('active');
12    $next.fadeIn(100).addClass('active');
13  }
14
15  
16start.addEventListener('click',() =>{
17  adding();
18  timerId = setInterval(changeImg,100);
19 });
20
21a.addEventListener('click',() =>{
22  clearInterval(timerId);
23  if( a == img1 )//表示されている画像がimg1の画像なら成功
24{
25      console.log("成功");
26  }else{
27      console.log("失敗");
28  }
29    
30
31});

行動規範の内容に同意します

回答1件

自己解決

Javascript
1
2
3start.addEventListener('click',() =>{
4  adding();
5  timerId = setInterval(changeImg,100);
6 });
7
8a.addEventListener('click',() =>{
9  clearInterval(timerId);
10  if( $('#img1').attr('src') == $('.active').attr('src'))
11//表示されている画像がimg1の画像なら成功
12{
13      console.log("成功");
14  }else{
15      console.log("失敗");
16  }
17
18
19});
20

今回のコードではfadeInする画像には'active'をつけて、反対にfadeOutする画像は'active'を外すという仕組みにしているので'active'がついているsrcと今回であればimg1のsrcが一致しているかどうかという条件分岐にすることで表示されている画像が一致しているかというのを表すことができました。

投稿2021/03/04 06:25

kzy2

総合スコア7