0

そのため、カウントでイベントを発生させようとしていますが、機能していないようです。私がやりたいことは#reward、6 つのa.correctリンクがクリックされたときにフェードインすることです。なぜ機能しないのかわかりません。助けていただければ幸いです:)

リンク: http://www.carlpapworth.com/htmlove/sweet-talk.html

HTML:

    <body>
<header>
    <div id="headerTitle"><a href="index.html">&lt;html<span class="heart">&hearts;</span>ve&gt;</a>
            </div>
            <div id="help">
                <h2>?</h2>
                <div id="helpInfo">
                    <p>The name of the puzzle should lead u to success!</p>
                </div>
            </div>
        </header>
    <div id="reward">
        <div id="rewardContainer">
            <div id="rewardBG" class="heart">&hearts;
            </div>
            <p>OMG, this must be luv<br><a href="index.html" id="exit4" data-key="4" class="exit">x</a></p>
        </div>
    </div>  
    <div id="pageWrap">
        <div id="poem">
        <a href="#">w</a>
        <a href="#">h</a>
        <a href="#">e</a>
        <a href="#">n</a>&nbsp;

        <a href="#">t</a>
        <a href="#">h</a>
        <a href="#">e</a>&nbsp;

        <a href="#">t</a>
        <a href="#" class="correct">h</a>
        <a href="#">u</a>
        <a href="#">m</a>
        <a href="#">p</a>
        <a href="#">i</a>
        <a href="#">n</a>
        <a href="#">g</a>&nbsp;

        <a href="#">g</a>
        <a href="#">r</a>
        <a href="#">o</a>
        <a href="#">w</a>
        <a href="#">s</a>&nbsp;

        <br>
        <a href="#">w</a>
        <a href="#">h</a>
        <a href="#">e</a>
        <a href="#">n</a>&nbsp;

        <a href="#">t</a>
        <a href="#">h</a>
        <a href="#">e</a>&nbsp;
        <a href="#">p</a>
        <a href="#">u</a>
        <a href="#">l</a>
        <a href="#">s</a>
        <a href="#" class="correct">e</a>&nbsp;

        <a href="#">i</a>
    <a href="#">s</a>&nbsp;

    <a href="#">p</a>
    <a href="#">u</a>
    <a href="#">m</a>
    <a href="#">p</a>
    <a href="#">i</a>
    <a href="#">n</a>
    <a href="#">g</a>&nbsp;

    <a href="#">h</a>
    <a href="#">a</a>
    <a href="#">r</a>
    <a href="#">d</a>
    <br>
    </a>
    <a href="#" class="correct">a</a>
    <a href="#">n</a>
    <a href="#">d</a>
    <br>
    <a href="#">e</a>
    <a href="#">v</a>
    <a href="#">e</a>
    <a href="#">r</a>
    <a href="#">y</a>&nbsp;

    <a href="#">s</a>
    <a href="#">e</a>
    <a href="#">n</a>
    <a href="#">s</a>
    <a href="#">e</a>&nbsp;

    <a href="#" class="correct">r</a>
    <a href="#">e</a>
    <a href="#">p</a>
    <a href="#">e</a>
    <a href="#">a</a>
    <a href="#">t</a>
    <a href="#">s</a>&nbsp;

    <a href="#">t</a>
    <a href="#">h</a>
    <a href="#">e</a>&nbsp;

    <a href="#">b</a>
    <a href="#">e</a>
    <a href="#">a</a>
    <a href="#">t</a>
    <br>
    <a href="#">t</a>
    <a href="#">h</a>
    <a href="#">e</a>
    <a href="#">n</a>&nbsp;

    <a href="#">l</a>
    <a href="#">e</a>
    <a href="#">t</a>
    <a href="#" class="correct">t</a>
    <a href="#">i</a>
    <a href="#">n</a>
    <a href="#">g</a>&nbsp;

    <a href="#">g</a>
    <a href="#">o</a>&nbsp;

    <a href="#">i</a>
    <a href="#">s</a>&nbsp;

    <a href="#">a</a>
    <a href="#">l</a>
    <a href="#">l</a>
    <br>
    <a href="#">o</a>
    <a href="#">u</a>
    <a href="#">r</a>&nbsp;

    <a href="#">s</a>
    <a href="#">o</a>
    <a href="#">r</a>
    <a href="#">r</a>
    <a href="#">y</a>&nbsp;

    <a href="#" class="correct">s</a>
    <a href="#">o</a>
    <a href="#">u</a>
    <a href="#">l</a>
    <a href="#">s</a>&nbsp;

    <a href="#">m</a>
    <a href="#">u</a>
    <a href="#">s</a>
    <a href="#">t</a>&nbsp;

        <a href="#">d</a>
    <a href="#">o</a>
    </div>
</div> <!-- END Page Wrap -->
<footer>
    <div class="heartCollection">
        <p>collect us if u need luv:<p>
        <ul>
            <li><a id="collection1" class="notFound">&hearts;</a></li>
            <li><a id="collection2" class="notFound">&hearts;</a></li>
            <li><a id="collection3" class="notFound">&hearts;</a></li>
            <li><a id="collection4" class="notFound">&hearts;</a></li>
            <li><a id="collection5" class="notFound">&hearts;</a></li>
            <li><a id="collection6" class="notFound">&hearts;</a></li>
        </ul>
    </div>
    <div class="credits">with love from Popm0uth ©2012</div>
</footer>

Javascript:

var count = 0;
$(document).ready(function() {

    $('a.correct').click(function(){    
                $(this).css('color','#ff63ff');
                count++;
    });
    $('a:not(.correct)').click(function(){
        $('a.correct').css('color','#363636');  
    });
    if (count == 6) {
        $('#reward').fadeIn(1000);
    }
});
4

4 に答える 4

2

フェードイン条件をクリック リスナーに含めるだけで、

var count = 0;
$(document).ready(function() {

$('a.correct').click(function(){    
            $(this).css('color','#ff63ff');
            count++;
if (count == 6) {
    $('#reward').fadeIn(1000);
}
});
$('a:not(.correct)').click(function(){
    $('a.correct').css('color','#363636');  
});

});

于 2012-10-29T08:25:21.673 に答える
1

報酬にフェードインする部分を除いて、あなたがしていることはすべて問題ありません。これは、document.ready でのみ発生します。カウント インクリメントの直後に配置します。

$('a.correct').click(function(){    
            $(this).css('color','#ff63ff');
            count++;
            if (count == 6) {
                $('#reward').fadeIn(1000);
            }
});
于 2012-10-29T08:27:01.720 に答える
0

実際のデモ http://jsfiddle.net/cztSt/

これは、2つのことを助けます：

  • カウントが 6 に達すると、呼び出されるチェック関数があります。
  • 効果が必要な場合は、レンダリングを非表示にして開始する必要がありますfadeIn。

休息はあなたが必要とするのを助けるはずです:)

コード

$(document).ready(function() {
    count = 0;
    $('a.correct').click(function() {
        $(this).css('color', '#ff63ff');
        count++;
        check();
    });
    $('a:not(.correct)').click(function() {
        $('a.correct').css('color', '#363636');
    });

    function check() {

        if (count == 6) {
            $('#reward').fadeIn(1000);
        }
    }
});​
于 2012-10-29T08:39:13.763 に答える
0 
var count = 0;

    $(document).ready(function() {

        $('a.correct').click(function(){    

                    $(this).css('color','#ff63ff');
                    count++;
             alert(count);
        });
        $("a:not(class correct) ").click(function(){
            $('a.correct').css('color','#363636');  
           if (count == 6) {
            $('#reward').fadeIn(1000);
            }
        });

    });

fiddleデモ jsfiddle

于 2012-10-29T08:35:42.797 に答える