Question

我有一个测验应用程序，用户可以选择他们自己的预定义问题和答案，但我需要更改HTML标签和类。

我尝试过使用jQuery replaceWith方法和removeClass addClass函数，但它只是不起作用。任何人都可以帮忙。以下是我的代码示例：

用户点击一个span元素来回答问题，然后出现下一个问题。

测验页面中的HTML代码：

<p id='question1' class = "quizQuestions">What element would I be? 
    <span>Water</span>
    <span>Earth</span>
    <span class="correctAnswer">Fire</span>
    <span>Wind</span>
</p>

用于保持分数的Javascript：

var questionNumber = 1;
var score = 0;
function showQuestion(question) {
    $('p').hide();
        if ($("p:nth-of-type(" + question + ")").length>0){
            $("p:nth-of-type(" + question + ")").show();
    } else {
        $("#final").show(); //this shows the player the score at the end
    }
}

$('span').click(function() {
    if ($(this).hasClass("correctAnswer")) {
    score++;
}

$('.score').html(score);
    questionNumber++;
    showQuestion(questionNumber);
});

showQuestion(questionNumber);

我有一个不同的代码段供用户选择自己的预定义问题并选择预定义的答案。由于JS函数问题，我不得不更改元素的标记名称以防止出现函数错误。以下是我的代码示例，供用户选择自己的问题。

问题选项中的HTML代码可供选择：

<ul id = "questionChoice1">If I were an animal, what would it be?
    <li>Horse</li> //The user clicks on li which add's Class "correct"
    <li>Bird</li>
    <li>Fish</li>
    <li>Bear</li>
</ul>
Now pick your correct answer & click Save
<button class="Save">Save</button>

用于将类添加到所选答案的Javascript：

$('li').click(function(){
    $('li').removeClass("correct");
    $(this).addClass("correct");
}); // this gives the span elements the class the user chooses

当用户选择他们的li回答questionChoice并点击“保存”按钮时，我需要在主要测验部分中的问题1成为：

<p id = "question1">If I were an animal, what would it be?
    <span class = "correct">Horse</span> 
    <span>Bird</span>
    <span>Fish</span>
    <span>Bear</span>
</p>

这是我完成项目所需要克服的最后一道障碍。我只是不知道如何更改标签名称...任何帮助将是最受欢迎的。感谢。

Answer 1

有一些名为＆＃39; TweenLite＆＃39;的有用javascript库。使用TweenLite，您可以更改html中的所有内容，包括标记和类。

这是网站：

Erik Carlsten's tutorials

更改标签和类

1 个答案: