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

Question

大家好，提前感谢您抽出时间查看这篇文章。我到处搜索教程来帮助我解决这个特定问题，但无济于事。我希望这里的某个地方能给我一些指导？

基本上，我的客户想要一个多页表单，用户可以在其中从 dentry 图表中选择单个 dentry ，如下图所示。第一张图片显示的是未选择任何 dentry 的 dentry 图表，第二张图片显示的是同一图表但随机选择了 dentry :

Dental Chart w/out Selections

Dental Chart w/Selections

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

“ dentry 图表种植体:3、8、9、16、19、27、31”，用于选择的每颗 dentry 。如果用户希望重新开始，他们还应该能够通过“重置”按钮重置他们的选择。

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

再次感谢所有帮助!

最好的，

谢恩

Answer 1

嗯。这将是一个*痒，或者我觉得。 除了像单独的 .png 一样切掉每颗 dentry ，然后将每颗 dentry 图像绝对定位在 div 内，以重新创建您的示例的方式将 dentry 编号作为图像 alt 属性，什么都没有想到例如。

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

在此之后，您可以绑定(bind)点击事件，该事件会在点击时将“事件”类添加到该单个图像，并更改 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 都有数字。然后用户可以自己输入数字。