javascript - 多页表单的齿形图切换按钮？

大家好，在此先感谢您抽出宝贵时间查看这篇文章。我在高低处搜索了一个教程，以帮助我解决这个特定问题，但无济于事。我希望这里的某个地方可能足以为我提供一些指导？

基本上，我的客户希望使用多页表单，其中用户可以从 dentry 图表中选择单个 dentry ，如下图所示。第一个图像显示未选择任何 dentry 的 dentry 图表，第二个图像显示选择了随机 dentry 的同一 dentry 图表:

Dental Chart w/out Selections

Dental Chart w/Selections

用户选择了单个 dentry 后，相应的数据需要显示在多页表单提交摘要中，我的客户通过以下方式通过电子邮件收到该摘要:

对于每个选定的 dentry ，“牙图植入物:3、8、9、16、19、27、31”。如果用户希望重新开始，他们还应该能够通过“重置”按钮重置其选择。

只是想知道你们可能建议什么是实现这一目标的最佳方法？我客户的网站是Joomla!网站只是为了让您知道我正在使用什么。 :)

再次感谢您提供的所有帮助!

最好，

尚恩

最佳答案

好。我会觉得这很麻烦。
除了将每个单独的 dentry 像单独的 .png 一样切出，然后将每个 dentry 图像绝对定位在div内，以重新创建示例(例如， dentry 编号为图像alt属性)的方式，什么都没想到。

您还必须为所有这些剪切出的图像创建粉红色版本。

此后，您可以绑定(bind)单击事件，该事件将在单击时向该单个图像添加“ Activity ”类，并且还更改src属性，以便用户可以看到选定的 dentry 。

jQuery示例

$('.tooth').click(
    if($(this).hasClass('active')){
        $(this).removeClass('active').attr('src','whiteVersion.png');
    } else {
        $(this).addClass('active').attr('src','pinkVersion.png');
    }

)

之后，您可以遍历这些单独的图像并生成该字符串:3、8、9、16、19、27、31

再次-jQuery示例

var selected = '';
$('.tooth').each(function(){
    if($(this).hasClass('active')){
        if(selected === ''){
            selected = $(this).attr('alt');
        } else{
            selected += ', ' + $(this).attr('alt');
        }
    }
})

* 更简单的方法:*
将具有大的 dentry 图像，其中每个 dentry 都有数字。然后用户可以自己输入数字。

关于javascript - 多页表单的齿形图切换按钮？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6880761/