2

半機能アンケートがあります。最初に質問が表示され、その下に回答が表示されます。回答をクリックすると、その回答が記録されてユーザーに表示されます。

質問 1 の回答が表示されたときに、質問 2 の画像とその相対的な回答が、質問 1 とその可能な回答の代わりに表示されるようにするには、助けが必要です。

ここの jsfiddle にすべてをアップロードしましたhttp://jsfiddle.net/QV5EB/、私は同様のイベントを探し回りました。私が探しているものに関連しているように見えるこのコーディングの一部を見つけました。私は自分のコードでは使用していません。

self.selectQuestion = function(answer) {
    self.progress.push({
        question: questions[currentQuestionIndex].caption,
        answer: answer.caption
    });

誰かがこれを行う特定の方法を推奨できますか?

4

1 に答える 1

2

これは非常に簡単なはずです。画像と各回答の ID を設定し、 を使用document.getElementById()して各要素を取得するだけです。

.src画像のプロパティを新しい画像の URL に変更します。

.innerHTML回答については、プロパティを新しい回答の値に変更します。

HTML は次のようになります。

<img src='whatever.jpg' id='pic'>
<label id='answer1'><input type='radio' name='answer' value='dog'> Dog</label>
<label id='answer2'><input type='radio' name='answer' value='pig'> Pig</label>
<label id='answer3'><input type='radio' name='answer' value='snake'> Snake</label>

次に、JS は次のようになります。

document.getElementById('pic').src = 'newpic.jpg';
document.getElementById('answer1').innerHTML = '<input type='radio' name='answer' value='rooster'>Rooster';

等

.innerHTMLDOM 関数を使わずに、より洗練された方法があります。それらについていくつかの調査を行ってください。それらは楽しくて強力です。特に、上記の JS は次の形式を取る場合があります。

var rad = document.createElement('input');
rad.type = 'radio';
rad.name = 'answer';
rad.value = 'rooster';

...そしてspan、テキストに a を挿入することもできますが、少しやりすぎです。たぶんinnerHTML最高です。:)

于 2013-06-10T00:36:04.827 に答える