Question

<!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>

我的问题是分配给所有段落元素的click事件的函数是闭包。因此，单击var计数器增加的第一个段落元素。当用户点击第二段时，计数器变量应显示2，不是吗？但是它显示出1.i对这种情况发生的原因感兴趣

Answer 1

您已定义var count两次。遗漏$("p").each(function(){...})内的那个。那里的var使变量本地化为该函数。

Answer 2

你描述的问题的原因是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>

Answer 3

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

jquery关闭没有按预期工作

3 个答案: