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，不是吗？但它显示 1.im 对为什么会发生这种情况感兴趣

4

3 回答 3

3

你已经定义var count了两次。省略 INSIDE 中的那个$("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 回答