Question

每当我第一次点击卡片时，它就会顺利进行。但是每当卡片已经翻转，我试图点击它以便翻转时，文本似乎消失了，但没有其他事情发生。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>flip cards</title>
    <style type="text/css">
        * {margin:0; padding:0;}            
        ul#cards li{list-style-type:none; margin:5px; }
        ul#cards img, #cards dl{width:200px; height:250px;background-color:orange;padding:5px;}
        ul#cards dl{display:none;}
        ul#cards dt{font-weight:bold;}

    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>   
    <script type="text/javascript">
        $(document).on("ready", geladen);
        function geladen(){
            console.log("geladen");
            $('#cards img').on("click", turn);
            $('#cards dl').on("click", turnBack);

        }
        function turn(event){
            $(event.target)
                .animate({"width":"0", "margin-left":"100"}, 500, 
                    function(){
                        $(this).css("display", "none")                  
                        .next()
                        .css("display", "block")
                        .animate({"width":"200", "margin-left":"0"}, 500);
                    }
                )
        }
        function turnBack(event){
            $(event.target)
                .animate({"width":"0", "margin-left":"100"}, 500)
                .css("display", "none")
                .prev()
                .css("display", "block")
                .animate({"width":"200", "margin-left":"0"}, 500);
        }
    </script>
</head>

<body>
    <ul id="cards">
        <li>
            <img src="wesley.jpg" alt="Wesley Sneijder, middenvelder" />
            <dl>
                <dt>naam</dt>
                <dd>Wesley Sneijder</dd>
                <dt>rol</dt>
                <dd>middenvelder</dd>
                <dt>geboortedatum</dt>
                <dd>9 juni 1984</dd>
                <dt>club</dt>
                <dd>Inter Milan</dd>
            </dl>
        </li>
        <li>
            <img src="robin.jpg" alt="Robin van Persie, aanvaller" />
            <dl>
                <dt>naam</dt>
                <dd>Robin van Persie</dd>
                <dt>rol</dt>
                <dd>aanvaller</dd>
                <dt>geboortedatum</dt>
                <dd>6 augustus 1983</dd>
                <dt>club</dt>
                <dd>Arsenal</dd>
            </dl>
        </li>
    </ul>
</body>

Answer 1

尝试在$（this）而不是$（event.Target）

上执行折返动画

    function turnBack(event){
        $(this)
            .animate({"width":"0", "margin-left":"100"}, 500)
            .css("display", "none")
            .prev()
            .css("display", "block")
            .animate({"width":"200", "margin-left":"0"}, 500);
    }

event.target包含由于冒泡而实际点击的文本（dt / dd），而这是指附加了点击的元素。

翻转卡不能正常工作jquery

1 个答案: