JavaScript 单击

Question

我有这份文档，它使我能够获得一份带有点击进度的多项选择选择调查问卷。

如何用图像代替此处的文字？ (并且仍然有这样的机制，一旦单击[图像]，就会提出下一个问题)

我已经尝试使用 UL/H1 设置背景图像进行一些基本的 div 操作，但正如您所期望的，这导致我没有任何用处。

我很好奇这是否是因为“标题”需要是其他内容。

            var questions = [
                {
                    caption: 'Question 1?',
                    answers: [
                        { caption: 'It sucks!' },
                        { caption: 'It rules!' }
                    ]
                }

我正在处理的其余代码位于: http://jsfiddle.net/Rbzy6/19/

Answer 1

做这样的事情怎么样:fiddle

我所做的是将图像名称设置为答案:

var questions = [
        {
            caption: 'Question 1?',
            answers: [
                { caption: 'It sucks!' },
                { caption: 'It rules!' }
            ]
        },
        {
            caption: 'Question 2?',
            answers: [
                { caption: '_62880798_62880797.jpg' },
                { caption: '_62880035_62880034.jpg' }
            ]
        }
];

然后，之后:

self.currentQuestion(questions[currentQuestionIndex]);

我添加这个 jQuery 代码:

$('#lol').find('li').each(function() {
    var imgPath = 'http://news.bbcimg.co.uk/media/images/62880000/jpg/';
    var imgName = $(this).text();
    $(this).html('<img src="'+imgPath+imgName+'" width="20" />');
});

我使用li的内容元素(答案)来获取图像的名称，然后替换 li 的内容带有图像标签的元素 ( <img src="" /> )。