1 
<!DOCTYPE html>
<html>
    <head>
        <style>
            p { margin: 4px; font-size:16px; font-weight:bolder;cursor:pointer; }
            .blue { color:blue; }
            .highlight { background:red; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
        <p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
        <p class="blue">on these (<span>clicks: 0</span>)</p>
        <p class="blue">paragraphs (<span>clicks: 0</span>)</p>

        <script>
            var count = 0;
            $("p").each(function() {
                var $thisParagraph = $(this);
                var count = 0;
                $thisParagraph.click(function() {
                    count++;
                    $thisParagraph.find("span").text('clicks: ' + count);
                    $thisParagraph.toggleClass("highlight", count % 3 == 0);
                });
            });
        </script>
    </body>
</html>

私の問題は、すべての段落要素のクリックイベントに割り当てられた関数がクロージャであるということです。したがって、最初の段落要素をクリックすると、varカウンターが増加します。ユーザーが2番目の段落をクリックすると、カウンター変数に2が表示されますね。しかし、これが起こっている理由に興味を持っている1.imを表示しています

4

3 に答える 3

3

2回定義var countしました。内の1つを省略し$("p").each(function(){...})ます。そのvar中にあるものは、変数をその関数に対してローカルにします。

于 2013-01-30T02:42:15.243 に答える
3

あなたが説明する問題の原因は、mrunionが言ったことです：あなたはcountローカル変数として再定義しています。.eachただし、コードを大幅に簡略化してループを取り除くこともできます。

<script>
var count = 0;
$("p").click(function() {
    count++;
    var $thisParagraph = $(this);
    $thisParagraph.find("span").text('clicks: ' + count);
    $thisParagraph.toggleClass("highlight", count % 3 == 0);
});
</script>
于 2013-01-30T02:46:41.583 に答える
0 
$("p").each(function () {
    var count = 0;
    $(this).click(function () {
        count++;
        $(this).find("span").text('clicks: ' + count);
        $(this).toggleClass("highlight", count % 3 == 0);
    });
});
于 2013-01-30T02:57:03.890 に答える