检查2张图像是否相同

时间:2016-02-22 08:48:01

标签: javascript jquery

我正在寻找一种方法,我可以检查从我的math.random中选择的图像是否与我用户选择的图像相同。用户选择的图片将显示style="solid 3px #587388"因此,我正在寻找一种方法来检查style="solid 3px #587388"的图片是否与#winner img相同。如果它们是相同的,它应该警告()赢了,否则输了。我怎样才能做到这一点?

这是我的javascript / jquery代码:

function changeCoinBorder(obj) {
    var tCoin = document.getElementById('tCoin');
    var ctCoin = document.getElementById('ctCoin');
    tCoin.style.border = 'none';
    ctCoin.style.border = 'none';
    obj.style.border = 'solid 3px #587388';
}
var counter = 5;

setInterval(function () {
 counter--;
                if (counter >= 0) {
                    span = document.getElementById("count");
                    span.innerHTML = counter;
                }
                // Display 'counter' wherever you want to display it.
                if (counter === 0) {

                    var image = new Array();
                    image[0] = "/Content/img/ct.png";
                    image[1] = "/Content/img/teroist.png";
                    var size = image.length
                    var x = Math.floor(size * Math.random())

                    $('#winner').fadeIn().attr('src', image[x]);
                    $('#winner').addClass("WinImage");

这是html:

<div class="row center">
    <div class="col-sm-5">
        <a href="#">
            <img id="ctCoin" onclick="changeCoinBorder(this);" class="img-circle CoinImages" src="~/Content/img/ct.png" />
        </a>
    </div>
    <div class="col-sm-2">
        <img id="winner" />
    </div>
    <div class="col-sm-5">
        <a href="#">
            <img id="tCoin" onclick="changeCoinBorder(this);" class="img-circle CoinImages" src="~/Content/img/teroist.png" />
        </a>
    </div>

1 个答案:

答案 0 :(得分:1)

JS:

function changeCoinBorder(obj) {

    $('.CoinImages').removeClass('selected');
    $(obj).addClass('selected');
}

function randomImg(){
    var imgs = $('.CoinImages');
    var randomOne = Math.floor(imgs.length * Math.random());
    $('#winner').fadeIn().attr('src', $(imgs[randomOne]).attr('src') );
    $('#winner').addClass("WinImage");
    if ($('#winner').attr('src') === $('.selected').attr('src')){
        alert('You win!');
    }
}

的CSS:

.selected {border: solid 3px #587388;}

检查一下: https://jsfiddle.net/28mgqqk1/1/