2016-04-16 10 views
0

私は自分の事前定義された質問と回答を選択できるクイズのアプリを持っていますが、HTMLタグとクラスを変更する必要があります。タグとクラスを変更

jQuery replaceWithメソッドとremoveClass addClass関数を使用しようとしましたが、機能していません。誰も助けてください。以下は私のコードの例です:

ユーザーはスパン要素をクリックして質問に答え、次の質問が表示されます。

クイズページの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コード:ユーザーが私をquestionChoiceに自分のliの答えを選択し、[保存]ボタンをクリックすると

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

:選択した解答にクラスを追加するための

<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をメインクイズのセクションで質問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> 

私のプロジェクトを完了するために克服する必要がある最後のハードル。私はちょうどタグ名を変更する方法を知らない...任意のヘルプが最も感謝されるだろう。ありがとう。

+2

あなたのjavascriptがどこにありますか? –

+0

JSさんが@RajaprabhuAravindasamyに感謝しました。 –

答えて

0

「TweenLite」という名前の便利なJavaScriptライブラリがあります。 TweenLiteを使用すると、タグやクラスを含むhtmlのすべてを変更できます。ここで

は、ウェブサイトである:

http://greensock.com/tweenlite

関連する問題