Question

我想制作迷你游戏，但坚持使用逻辑代码。

试试看下面的代码,,, 我想直接点击所有div ID，错误2，错误3，然后错误4（最后）其值为直接。可能会添加一些类。

我想在最后一次点击ID之前错误4，ID错误4其addclass rightAnswers。因为类rightAnswers对下一个结果页面有属性html5 data-current-game =“5”data-next-game =“finish”。

我已尝试制作并通过https://stackoverflow.com/users/2025923/tushar提供帮助由Tushar帮助，How to show last ID when All ID on DIV click，

但现在我想要不同的逻辑。

谢谢

注意：
我试着像这样编辑，
但是班级权利不能起作用......

    divs.splice(divs.indexOf($(this).prop("id")), 1)
    if (divs.length == 0) {
      $('#wrong1, #wrong2, #wrong3, #wrong4').addClass('rightAnswers');
    }

并添加脚本网址方向，如下所示：但是班级权利仍然不起作用，
如果我点击，我想要课程权利。

$(".rightAnswers").click(function() {
  window.location = "/game/result";
});

代码来自How to show last ID when All ID on DIV click

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

 <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>

Answer 1

我没有真正得到你正在做的事情，但我认为这会修复你的代码。这是jsfiddle： https://jsfiddle.net/mckinleymedia/2s0wuL0a/

HTML：

<div id="game1"> 
    <img 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 class="wrongAnswer" src="http://authentic-scandinavia.com/system/images/tours/photos/125/thumbnail.jpg" data-current-game="1" data-next-game="2" />
    <div id='1' class="wrong no-bottom">
        <label>TEXT 1</label>
    </div>
    <div id='2' class="wrong no-bottom">
        <label>TEXT 2</label>
    </div>
    <div id='3' class="wrong no-bottom">
        <label>TEXT 3</label>
    </div>
    <div id='4' class="wrong no-bottom">
        <label>TEXT 4</label>
    </div>
</div>

脚本：

 $(function () {
   var divs = ["1", "2", "3", "4"];
   $('#game1 .wrong').click(function () {
      $(this).animate({
            opacity: 0,
            top: 100,
            }, 500);
    divs.splice(divs.indexOf($(this).prop("id")),1)
    console.log(divs);
    console.log(divs.length);
    if(divs.length == 0){
        $('#game1 .wrongAnswer').hide();
        $('#game1 .rightAnswer').show();
    }

  });
});

这是修订版。还有一个新的jsfiddle： https://jsfiddle.net/mckinleymedia/1ocnoaaa/2/

HTML：

<div id="game1">
    <img src="https://authentic-scandinavia.com/system/images/tours/photos/10/thumbnail.jpg" data-current-game="1" data-next-game="2" />
    <div id="target1"></div>
</div>

脚本：

 $(function () {
     function createGame(num) {
         var answers = [{
             text: "TEXT 1"
         }, {
             text: "TEXT 2"
         }, {
             text: "TEXT 3"
         }, {
             text: "TEXT 4"
         }];
         var target = $("#target" + num);
         answers.forEach(function (answer, k) {
             var aid = 'a' + num + '-' + k;
             $("<div />")
                 .addClass("answer no-bottom")
                 .attr('id', aid)
                 .html(answer.text)
                 .appendTo(target);
             answer.id = aid;
         });

         $('#game1 .answer').click(function () {
             var $this = $(this);
             $this.addClass('wrongAnswer');
             var hasMoreAnswers,
                 thisAnswer = _.find(answers, function(answer) {
                     return answer.id === $this.attr('id');
                 });
             thisAnswer.tried = true;
             hasMoreAnswers = _.find(answers, function(answer) {
                 return answer.tried !== true;
             });
             if (!hasMoreAnswers) {
                 window.open("http://www.w3schools.com");
             }
         });
     }
     createGame(1);
 });

式：

.wrongAnswer {
    opacity:0;
    transition:opacity 0.5s linear;
}

如何在所有ID点击时获取价值

1 个答案: