javascript - 如何使计数变量起作用？

Question

所以我试图用计数触发一个事件，但我似乎没有让它工作。我想要做的是在点击#reward6 个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);
    }
});

score 2 · Accepted Answer

只需将您的淡入淡出条件包含在点击侦听器中，

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');  
});

});

score 1 · Accepted Answer

你所做的一切都很好，除了你在奖励中淡出的部分。这只会发生在 document.ready 上。我会把它放在计数增量之后：

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

score 0 · Accepted Answer

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);
            }
        });

    });

小提琴演示 jsfiddle

score 0 · Accepted Answer

工作演示 http://jsfiddle.net/cztSt/

这将有两件事：

当计数达到 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);
        }
    }
});

javascript - 如何使计数变量起作用？

4 回答 4

Related

Reference