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

Question

你好伙计们，并提前感谢您花时间查看这篇文章。 我一直在寻找一个教程，以帮助我解决这个特殊问题无济于事。 我希望这里的某个地方可能会给我一些指导吗？

基本上我的客户想要一个多页形式，其中用户能够从牙科图表中选择单个牙齿，如我在下面链接的图像中所示。 第一张图显示未选择任何牙齿的牙科图表，第二张图像显示选择随机牙齿的相同图表：

牙科图表没有选择

牙科图表w /选择

一旦用户选择了单个牙齿，相应的数据就需要出现在我的客户通过电子邮件以下列方式接收的多页表单提交摘要中：

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

只是想知道你们可能会建议什么是实现这一目标的最佳方式？ 我的客户的网站是Joomla！ 网站只是让你知道我在做什么。 :)

再次感谢您的帮助！

最好，

巴蒂尔

Answer 1

好。 这会是一个*痒，或者我觉得。 除了将每个单独的牙齿切割成单独的.png之外，没有什么可以想到的，然后将每个牙齿图像绝对定位在div中，以重新创建示例，其中牙齿数量是图像alt属性。

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

在此之后，您可以绑定单击事件，该事件将在单击时将“活动”类添加到该单个图像，并且还更改src属性，以便用户看到所选的牙齿。

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');
        }
    }
})

* 更简单的方法： *将有大牙齿图像，每个牙齿都有数字。 然后用户可以自己输入数字。