Question

我想对div elemenets（卡片）执行“翻转卡”效果。为此我正在使用下面的代码（我应用onclick事件，但我没有在这里提到它）。有谁知道问题出在哪里？我想翻转“卡片”Div元素。为此我正在使用下面包含的“OpenCard（）”JavaScript函数。

编辑1：添加了jsFiddle

http://jsfiddle.net/9CvYd/1/

JavaScript：

    function OpenCard() {
    var id = $(this).attr("id");

    if ($("#" + id + " img").is(":hidden")) {
        var img = document.querySelector("#" + id + " img");
        img.classList.toggle("flip");

        if (ImgOpened == "") {
            BoxOpened = id;
            ImgOpened = $("#" + id + " img").attr("src");
            setTimeout(function() {
                $(Source + " div").bind("click", OpenCard)
            }, 300);
        } else {
            CurrentOpened = $("#" + id + " img").attr("src");
            if (ImgOpened != CurrentOpened) {
                setTimeout(function() {
                    document.querySelector("#" + id + " img").classList.toggle("flip");
                    document.querySelector("#" + BoxOpened + " img").classList.toggle("flip");
                    BoxOpened = "";
                    ImgOpened = "";
                }, 400);
                Counter-=10;
                wrong.play();
            } else {
                $("#" + id + " img").parent().css("disabled", "disabled");
                $("#" + BoxOpened + " img").parent().css("disabled", "disabled");
                ImgFound++;
                BoxOpened = "";
                ImgOpened = "";
                Counter+=100;
                correct.play();
            }
            setTimeout(function() {
                $(Source + " div").bind("click", OpenCard)
            }, 400);
        }
        $("#counter").html("" + Counter);

        if (ImgFound == ImgSource.length) {
        clearInterval(timer);
        alert ("Game over! You result is: "+Counter);
        }
    }
}

CSS：

 #picbox {
    margin: 0px auto;
    width: auto;
}
#boxcard {
    z-index: 1;
    display: table;
        margin: 0px auto;
    width: auto;
}

#boxcard div{
    float: left;
    width: 100;
    height: 120;
    margin: 5px;
    padding: 5px;
    border: 4px solid #EE872A;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
  background: #B1B1B1;
    z-index: 2;
}
#boxcard > div:nth-child(6n+1) {
    clear: both;
}
#boxcard div img {
    /*display: none;*/
    border-radius: 10px;
    z-index: 3;
}

#boxcard div img.flip{

  transform: rotateY(180deg);
   display:inline-block;

}

HTML：

<div id="boxcard" align="center">
            <div id="card10" style="visibility: visible;"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png" class=""></div>
            <div id="card11" style="visibility: visible;"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png" class=""></div>
            <div id="card12" style="visibility: visible;"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>

Answer 1

问题是您的if语句条件不匹配。

点击此处的卡片：http://jsfiddle.net/YffE5/1/

if ($("#" + id + " img").is(":hidden")) // Image is visible, thus code inside this will not execute.

CSS3转换不适用于DIV元素

1 个答案: