如何在javascript中转换问卷图像

Question

我有一份半功能问卷。最初出现的问题与答案下面，当一个答案被点击，它被记录并显示在下面的用户。

I现在需要帮助得到它，这样当问题1的答案被击中时，问题2的图像和它的相关答案就会出现在问题1和它可能的答案之前。

我在这里把所有的东西都上传到了http://jsfiddle.net/QV5EB/上，我四处寻找类似的事件，我发现这段代码似乎与我想要的内容相关，只是它是基于我没有在代码中使用的标题。

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

有人能推荐一种特殊的方法吗？

Answer 1

这应该非常容易--为图片和每个答案设置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';

等。

在不使用.innerHTML的情况下，还有一种更优雅的方法，那就是DOM函数。做些研究，他们是有趣和强大的。特别是，上述JS可能采用以下形式

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

...and可能会为文本插入一个span，但它做得有点过了。也许innerHTML是最好的。:)