javascript - JQuery:定义变量会阻止我的脚本运行

Question

<script>
    $(document).foundation(
        var count = 1
        $("button.test").click(function(){
            if ($("p.change-me").text() === "OFF") {
                $("p.change-me").text("ON")
                count = count + 1
            }
            else if ($("p.change-me").text() === "ON") {
                $("p.change-me").text("OFF")
                count = count + 1
            }
            $("p.counter").text(count)
        })
        )
</script>

非常简单，我想在按下“开”和“关”按钮时显示计数。但是，当我添加“var count = 1”时，我的按钮不再有效。当我删除该行时，该按钮会将标签中的文本从打开变为关闭，然后从关闭变为打开。

怎么会？您可能会说，我正在自学 JQuery。

谢谢!

请求的 HTML:

<div class="row">
    <div class="small-6 columns text-center">
        <button class="button radius test">CLICK THIS</button>
    </div>
    <div class="small-6 columns text-center">
        <p class="change-me">OFF</p>
    </div>
</div>

<div class="row">
    <div class="small-12 columns text-center">
        <p>Here we will print how much fun you are having:</p>
        <p class="counter">0</p>
    </div>
</div>

Answer 1

将您的代码从 foundation() 调用中取出。还要记住使用分号。

        $(document).foundation();

        var count = 1;
        $("button.test").click(function(){
            if ($("p.change-me").text() === "OFF") {
                $("p.change-me").text("ON");
                count = count + 1;
            }
            else if ($("p.change-me").text() === "ON") {
                $("p.change-me").text("OFF");
                count = count + 1;
            }
            $("p.counter").text(count);
        })