Question

所以我试图用计数来发射一个事件，但我似乎并没有让它发挥作用。我想要做的是在点击6个#reward链接时淡出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);
    }
});

Answer 1

只需将你的fadein条件包含在点击监听器中，

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

}）;

Answer 2

你所做的一切都很好，除了你褪色的部分。这只会发生在document.ready上。我会在计数增量之后加上它：

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

Answer 3

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

    });

小提琴demo jsfiddle

Answer 4

工作演示 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);
        }
    }
});

如何使计数变量起作用？

4 个答案: