4

我有一个简单的脚本,它使用 setInterval 每秒生成一个 div 元素。我面临的问题是 addScore() 为窗口中的每个元素触发一次。因此,如果生成了四个目标,则 addScore() 函数会运行四次。

<div class="wrap">
    <div class="intro">
        <p>Simply press go and click the circles as fast as you can!</p>
        <button class="go" type="button">Go!</button>
    </div>  
</div>
<script type="text/javascript">

    var score = 0; // Starting score for game

    function addScore(){
        score++;
        console.log(score);
    }

    function spawnTargets() {
        $(".wrap").append("<div class='target'>Hello</div>");
        $(".target").click(function(){
            $(this).hide();
            addScore();
        });
    }

    $(".go").click(function() {
      $(".intro").toggle();
        setInterval(spawnTargets, 1000);
    });

</script>
4

2 回答 2

4

当您将点击事件添加到 .target 时,您将使用之前添加的所有 div 执行此操作!改用这个:

<script type="text/javascript">

    var score = 0; // Starting score for game

    function addScore(){
        score++;
        console.log(score);
    }

    function spawnTargets() {
        $(".wrap").append("<div class='target'>Hello</div>");
    }

    $(".go").click(function() {
      $(".intro").toggle();
        setInterval(spawnTargets, 1000);
    });

    $(".wrap").on('click', '.target', function(){
        $(this).hide();
        addScore();
    });

</script>

.on 函数将事件处理程序添加到父元素并过滤来自 .target 的点击元素。

于 2013-07-18T04:24:40.607 回答
0

当调用函数时,您正在绑定多个单击事件

function spawnTargets() {
        $(".wrap").append("<div class='target'>Hello</div>");
        $(".target").click(function(){
            $(this).hide();
            addScore();
        });
    }

相反,您需要委托事件

改变

$(".target").click(function(){

$('.wrap').on("click", ".target", function(){

并将其移至函数外部

代码

var score = 0; // Starting score for game

function addScore() {
    score++;
    console.log(score);
}

function spawnTargets() {
    $(".wrap").append("<div class='target'>Hello</div>");
}

$('.wrap').on("click", ".target", function () {
    $(this).hide();
    addScore();
});

$(".go").click(function () {
    $(".intro").toggle();
    setInterval(spawnTargets, 1000);
});
于 2013-07-18T04:22:48.330 回答