如何在javascript中切换问卷图像

How to switch questionnaire images in javascript

本文关键字：图像 javascript      更新时间：2023-09-26

我有一个半功能的问卷。一开始会出现一个问题并在下面显示答案，当点击答案时，它会被记录下来并在下面显示给用户。

我现在需要帮助得到它，以便当问题1的答案击中问题2的图像时，及其相对答案，出现在问题1及其可能答案的位置

我已经在jsfiddle上上传了整个东西http://jsfiddle.net/QV5EB/，我四处寻找类似的事件，我发现这段代码似乎相对于我要找的东西，只有它是基于我没有在我的代码中使用的标题。

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

有谁能推荐一种特殊的方法吗?

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

…也许可以为文本插入span，但这有点过分了。也许innerHTML是最好的。:)

相关文章：