JS对图像的条件

时间:2014-07-15 07:09:13

标签: javascript jquery html

我需要开发一种计算器,它显示一组图像,客户可以选择并根据他选择下一步的选择。在所有选择结束时,他将根据所选步骤的选择给予一个包。

可以在此链接中找到类似内容的工作示例:http://store.virginmedia.com/big-bundles.html然后点击“帮助我选择”#39;弹出左侧。

任何人都可以建议我可以从实现这样的事情开始的任何方法或库吗?

1 个答案:

答案 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();
    });
});