点击DIV上的所有ID时如何显示最后的ID [英] How to show last ID when All ID on DIV click

问题描述

我是javascript新手。
我想制作迷你游戏测验。但坚持这个逻辑。

试试看下面的代码,,,
我想用div ID替换div IDwrong-gameOnecorrect- gameOne
点击所有div ID后错误1，错误2，错误3，错误4，

我试过了，但点击一个ID后错误1或其他，div IDcorrect-gameOne显示。我不想这样。
请给我修复我的脚本如何使它。
对不起，我的英语不好。
非常感谢：blush：

$（function（）{$（'＃wrong1，＃wrong2，＃wrong3，＃snippet-code-js lang-js prettyprint-override点击（function（）{$（this）.animate（{opacity：0，top：100，}，500）; var divs = ['＃wrong1，＃wrong2，＃wrong3，＃wrong4']; if（$（this）.next（divs）.length === 1）$（'＃wrong-gameOne'）。eq（0）.hide（）; else $（'＃correct-gameOne'）。eq 0）.show（）;}）;}）;

< img id =correct-gameOneclass =rightAnswersrc =http://authentic-scandinavia.com/system/images/tours/photos/10/thumbnail.jpgdata-current-game = 1data-next-game =2style =display：none; />< img id =wrong-gameOneclass =wrongAnswersrc =http://authentic-scandinavia.com/system/images/tours/photos/125/thumbnail.jpgdata-current-game =1data-next-game =2/>< div id =wrong1class =no-bottom> < label> TEXT 1< / label>< / div>< div id =wrong2class =no-bottom> < label> TEXT 2< / label>< / div>< div id =wrong3class =no-bottom> < label> TEXT 3< / label>< / div>< div id =wrong4class =no-bottom> < label> TEXT 4< / label>< / div>





  $（function（）{
 var divs = [wrong1，wrong2，wrong3，wrong4]; 
 $（'＃wrong1，＃wrong2，＃wrong3，＃wrong4'）click（function（）{
 $（this）.animate（{
 opacity：0，
 top：100，
}，500）; 
 divs.splice（divs.indexOf（$（这个）.prop（id）），1）
 if（divs.length == 0）{
 $（'＃wrong-gameOne'）。eq（0）.hide（）; 
 $（'＃correct-gameOne'）。eq（0）.show（）; 
} 
}）; 
}）; 
  

希望这可以帮到你。



小提琴

I am newbie with javascript. i want to make mini game quiz. But stuck on this logic.

Try see my code below,,, I want to replace div ID "wrong-gameOne" with div ID "correct-gameOne" after click all div ID wrong1, wrong2, wrong3, wrong4,

I have try make it, but after click one ID "wrong 1" or other, div ID "correct-gameOne" is show. I don't want like this. Please give me fix my script below how to make it. Sorry for my bad english. Thanks so much :blush:

$(function() {
  $('#wrong1, #wrong2, #wrong3, #wrong4').click(function() {
    $(this).animate({
      opacity: 0,
      top: 100,
    }, 500);

    var divs = ['#wrong1, #wrong2, #wrong3, #wrong4'];

    if ($(this).next(divs).length === 1)
      $('#wrong-gameOne').eq(0).hide();
    else
      $('#correct-gameOne').eq(0).show();
  });
});

<img id="correct-gameOne" class="rightAnswer" src="http://authentic-scandinavia.com/system/images/tours/photos/10/thumbnail.jpg" data-current-game="1" data-next-game="2" style="display:none;" />
<img id="wrong-gameOne" class="wrongAnswer" src="http://authentic-scandinavia.com/system/images/tours/photos/125/thumbnail.jpg" data-current-game="1" data-next-game="2" />

<div id="wrong1" class="no-bottom">
  <label>TEXT 1</label>
</div>

<div id="wrong2" class="no-bottom">
  <label>TEXT 2</label>
</div>

<div id="wrong3" class="no-bottom">
  <label>TEXT 3</label>
</div>

<div id="wrong4" class="no-bottom">
  <label>TEXT 4</label>
</div>

解决方案

Please try this code.

 $(function () {
    var divs = ["wrong1", "wrong2", "wrong3", "wrong4"];
    $('#wrong1, #wrong2, #wrong3, #wrong4').click(function () {
        $(this).animate({
            opacity: 0,
           top: 100,
         }, 500);
    divs.splice(divs.indexOf($(this).prop("id")),1)
    if(divs.length == 0){
        $('#wrong-gameOne').eq(0).hide();
       $('#correct-gameOne').eq(0).show();
    }                
  });
});

Hope this will help you.

Fiddle

这篇关于点击DIV上的所有ID时如何显示最后的ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！