Question

我有一份半功能问卷。最初会出现一个问题，下面有答案，当点击答案时，会记录下来并在下方显示给用户。

我现在需要帮助才能获得它，以便当问题1的答案被触及问题2的图像及其相对答案时，代替问题1及其可能的答案。

我已经在jsfiddle上传了整个东西http://jsfiddle.net/QV5EB/，我四处寻找类似的事件，我发现这段编码似乎与我正在寻找的相关，只是它基于我自己的字幕不在我的代码中使用。

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

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

Answer 1

这应该很简单 - 为图片和每个答案设置ID，然后使用document.getElementById()来抓取每个元素。

对于图片，将其.src属性更改为新图片的网址。

要获得答案，请将其.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';

...并且可能为文本插入span，但它有点过头了。也许innerHTML是最好的。：）

如何在javascript中切换问卷图像

1 个答案: