Ändern von Tags und Klassen

Question

Ich habe eine Quiz-App, die Benutzer ihre eigenen vordefinierten Fragen und Antworten wählen können, aber ich muss HTML-Tags und Klassen ändern.

Ich habe versucht mit jQuery replaceWith Methoden und removeClass addClass Funktionen, aber es funktioniert einfach nicht. Kann mir bitte jemand helfen. Unten ist ein Beispiel für meinen Code:

Der Benutzer klickt auf ein span-Element, um die Frage zu beantworten, dann wird die nächste Frage angezeigt.

HTML-Code in Quiz Seite:

<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 für mitzählen:

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); 

Ich habe einen anderen Abschnitt des Codes für den Benutzer ihre eigenen vordefinierten Fragen zu wählen und eine vordefinierte Antwort wählen . Aufgrund von JS-Funktionsproblemen musste ich die Tag-Namen der Elemente ändern, um Funktionsfehler zu vermeiden. Im Folgenden finden Sie ein Beispiel für meinen Code, mit dem Benutzer ihre eigenen Fragen auswählen können.

HTML-Code in Frage Option zur Auswahl:

<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 zu ausgewählten Antwort Hinzufügen Klasse:

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

Wenn der Benutzer Antwort auf questionChoice ihre li wählt und klickt auf die Schaltfläche Speichern I brauche question1 im Hauptquiz-Abschnitt, um dies zu werden:

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

Dieser i s die letzte Hürde, die ich überwinden muss, um mein Projekt abzuschließen. Ich weiß einfach nicht, wie man die Tagnamen ändert ... jede Hilfe würde sehr geschätzt werden. Vielen Dank.

Answer 1

Es gibt eine nützliche Javascript-Bibliothek namens 'TweenLite'. Mit TweenLite können Sie alles in HTML ändern, einschließlich Tags und Klassen. Hier

ist die Website:

http://greensock.com/tweenlite