Question

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

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

Dental Chart w/out Selections

Dental Chart w/Selections

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

“牙齿植入物：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');
        }
    }
})

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

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

1 个答案: