javascript - 单击圆环图部分时显示/隐藏 Div

Question

我有一个圆环拉斐尔圆环图，我希望在单击它时显示相应的文本 div。

我尝试为每个部分设置 id，然后使用此代码通过 jquery 触发它们，但它不起作用。

jQuery(document).ready(function() {

jQuery(".div1, .div2, .div3, .div4").hide();

jQuery("#arched1, #arched2, #arched3, #arched4").bind("click", function () {

   jQuery(".div1, .div2, .div3, .div4").hide();

    if (jQuery(this).attr("id") == "oxbowarc1") {
        jQuery(".div1").show();
    } else if ($(this).attr("id") == "oxbowarc2") {
        jQuery(".div2").show();
    } else if (jQuery(this).attr("id") == "oxbowarc3") {
        jQuery(".div3").show();
    } else {
        jQuery(".div4").show();
    }
});
});

我该怎么做才能让这项工作成功？

这是 fiddle http://jsfiddle.net/dll416/17j9Lhwg/1/

Answer 1

代表。这些元素是在代码中动态添加或分配 id 的，jQuery 在创建处理程序时无法识别它们。

尝试类似的事情

jQuery(container).on("click", "#arched1, #arched2, #arched3, #arched4", function () {
...

本质上，您将处理程序附加到容器(可以是 document、"body" 或更具体的元素)，仅适用于 id<选择器中提到的。这样，处理程序就会附加到 documentReady 上确实存在的元素。

我没有将它添加到你的 fiddle 中，因为那里似乎缺少 id 的分配。