Модифицировать код под Internet Explorer [требует правки]

261

27 февраля 2017, 13:53

Уважаемые знатоки JS и IE! Изображения случайно перемешиваются при кликах в строго заданном порядке: например, только при кликах в определённой последовательности - красный, зелёный, жёлтый, синий. Но код не работает в Internet Explorer (планируется сохранится в файле с расширением .hta, поэтому нужно под IE).

<head>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
 <script type="text/javascript">
$(function() {
    var parent = $("#shuffle");
    var divs = parent.children();
    var arr = [0, 3, 1, 2],
        temp = [];
    $(".btn").on("click", function() {
        $("img", divs).show();
        for (var i = 0; i < divs.length; i++) {
            var k = Math.random() * divs.length | 0;
            divs.eq(k).appendTo(parent)
        }
    }).click();
    divs.on("click", "img", function(event) {
        event.stopPropagation();
        var i = $("img", divs).index(this);
        temp.push(i);
        i = temp.every(function(a, k) {
            return a == arr[k]
        });
        if (i) $(this).addClass("active");
        else {
            temp = [];
            $("img.active", divs).removeClass("active")
        }
        if (temp.length == 4) $("img", divs).fadeTo(1200,0).off()
    })
});
 </script>
 <style>
 #shuffle > div {
 float: left;
 height: 150px;
 width: 150px;
 }
 #shuffle {
 max-width: 300px;
 }
 #shuffle img{
   box-sizing: border-box;
   transition: all .8s ease-in-out;
 }
 #shuffle img.active{
   transform: scale(.5);
 }
 </style>
 </head>
 <body>
 <p>красный, зелёный, жёлтый, синий</p>
 <div id="shuffle">
 <div><img src="http://placehold.it/150x150/ff0000/ff0000"  height="150" width="150" class="btn"></div>
 <div><img src="http://placehold.it/150x150/ffff00/ffff00"  height="150" width="150" class="btn"></div>
 <div><img src="http://placehold.it/150x150/0000ff/0000ff"  height="150" width="150" class="btn"></div>
 <div><img src="http://placehold.it/150x150/00ff00/00ff00"  height="150" width="150" class="btn"></div>
 </div>
 </body>