我需要开发一种计算器,它显示一组图像,客户可以选择并根据他选择下一步的选择。在所有选择结束时,他将根据所选步骤的选择给予一个包。
可以在此链接中找到类似内容的工作示例:http://store.virginmedia.com/big-bundles.html然后点击“帮助我选择”#39;弹出左侧。
任何人都可以建议我可以从实现这样的事情开始的任何方法或库吗?
答案 0 :(得分:0)
好。所以这是非常基本的,但我创建了一个 JSFiddle ,只是为了让您入门。我不漂亮,但它应该给你一些必要的指示。
以下是代码,如果有什么不清楚的话,谷歌吧:
var selections = {
"opt1": false,
"opt2": false,
"opt3": false,
"opt4": false,
"opt5": false,
"opt6": false
};
$(document).ready(function() {
$('.option').click(function(event) {
var id = event.target.id;
if (selections[id]) {
$('#' + id).removeClass('checked-option');
selections[id] = false;
} else {
$('#' + id).addClass('checked-option');
selections[id] = true;
}
});
$('#btn1').click(function() {
$('#grp1').hide();
$('#grp2').show();
});
$('#btn2').click(function() {
$('#grp2').hide();
$('#grp1').show();
});
$('#btn3').click(function() {
var content = 'Selected:<ul>';
for (var i in selections) {
if (selections[i]) {
content += '<li>' + i + '</li>';
}
}
content += '</ul>';
$('#grp2').hide();
$('#done').html(content);
$('#grp3').show();
});
$('#btn4').click(function() {
$('#grp3').hide();
$('#grp2').show();
});
});