Question

开始练习jquery的小游戏。

我制作的脚本将区域添加到html地图元素中。但它只增加一个区域，我不明白为什么

脚本功能

function renderQuestion(question){

    // load correct and incorrect areas 
    question.$correctArea.appendTo($questionMap);
    question.$incorrectArea.appendTo($questionMap);

    // set question background image
    $questionImage.attr({
        src: question.backgroundImage
    }); 
}

function onCorrect(){
    score++;
    loadNextQuestion();
}

function onIncorrect(){
    $questionImage.attr({
        src: "../img/items/fail.png"
    });
}

function loadNextQuestion(){
    renderQuestion(questions[questionIndex]);
    questionIndex++;
}

// load first question
loadNextQuestion();

// clicks
$('.correct-area').click(function(){
    onCorrect();
});
$('.incorrect-area').click(function(){
    onIncorrect();
});

游戏在线： http://i333180.iris.fhict.nl/demo/pages/index.php

正如您所注意到的那样，在问题中，它会将第一个加载到正确的区域。单击正确答案后，将加载下一个问题，但不会替换新区域。有人看到了吗？

修改更改了函数renderQuestion：

    function renderQuestion(question){

    // load correct and incorrect areas 
    $questionMap.html(question.$incorrectArea);
    $questionMap.html(question.$correctArea);

    // set question background image
    $questionImage.attr({
        src: question.backgroundImage
    }); 

    // clicks
    $('.correct-area').on('click', onCorrect);
    $('.incorrect-area').on('click', onIncorrect);
}

点击工作正确，并添加了正确的区域。但是通过使用.html，它只添加了最后一个区域，我将它们都印在了

Answer 1

在开始追加问题地图之前清空问题地图。

function renderQuestion(question){
    // Clear out old questions
    $questionMap.empty();
    // load correct and incorrect areas 
    question.$correctArea.appendTo($questionMap);
    question.$incorrectArea.appendTo($questionMap);

    // set question background image
    $questionImage.attr({
        src: question.backgroundImage
    }); 
}

Answer 2

function renderQuestion(question){

    // load correct and incorrect areas 

    $questionMap.html(question.$correctArea)
    $questionMap.append(question.$incorrectArea)

    // set question background image
    $questionImage.attr({
        src: question.backgroundImage
    }); 
}

使用html()方法替换内容而不是仅将新内容添加到底部。我不确定你的$questionMap是否是一个jQuery对象，如果没有，请将其包装成其他任何东西（$($questionMap)），它应该可以工作。

jQuery区域元素只添加一次

2 个答案: