javascript - HTML，可点击图表，点击时出现框

Question

我正在尝试构建一个可点击的人物图，当您单击一个人的肢体时，会在解释所选肢体的人旁边出现一个文本框。

人在左边，盒子在右边堆叠在一起。选择肢体后，它会突出显示。

最好的方法是什么？我应该使用 jQuery 切换吗？：

$( "#effect" ).toggle( selectedEffect, options, 500 );

Answer 1

假设您有一个 ID 为“person-diagram”的人图。您还应该为希望文本框出现的每个元素添加一个“肢体”类。

然后，我将使用 jQuery Bind http://api.jquery.com/bind/绑定一个 jQuery 事件处理程序。然后，使用 jQuery 切换来切换文本框。至于如何确定在文本框中显示什么文本，有几种不同的方法可以实现。一种简单的方法是为所有肢体赋予标题属性，然后检索单击的肢体的标题并将其设置为文本框中的文本。

例子：

$( "#person-diagram .limb" ).bind( "click", function() {
  $("#textbox" ).toggle();
});

这应该让你开始:)