Question

我正在尝试为svg donutchart创建一个onclick事件。通过默认text1应该显示。通过单击另一个切片，text1应与相应的文本交换。文本部分应该位于饼图旁边。

slice6.click(function(setVisibility(id, visibility)){
    document.getElementById("text6").style.display = visibility;
});

Answer 1

添加showText功能，以便更容易显示/隐藏给定的文本块。

然后将点击侦听器更改为以下内容。您不能将任何功能传递给点击监听器。

您可以传递这样的匿名函数：

e.click(function(e) {
  // I'm within an anonymous function
});

或者您可以创建一个传递给点击的功能。

function onclick(e) {
    // I'm a named function
}

e.click(onclick);

注意：如果您不需要事件信息，则该功能不需要参数e。

function showText(t1, t2, t3, t4, t5, t6) {
    document.getElementById("text1").style.display = (t1) ? "block" : "none";
    document.getElementById("text2").style.display = (t2) ? "block" : "none";
    document.getElementById("text3").style.display = (t3) ? "block" : "none";
    document.getElementById("text4").style.display = (t4) ? "block" : "none";
    document.getElementById("text5").style.display = (t5) ? "block" : "none";
    document.getElementById("text6").style.display = (t6) ? "block" : "none";
}

slice1.click(function(e) {
    showText(true, false, false, false, false, false);
});

slice2.click(function(e) {
    showText(false, true, false, false, false, false);
});

slice3.click(function(e) {
    showText(false, false, true, false, false, false);
});

slice4.click(function(e) {
    showText(false, false, false, true, false, false);
});

slice5.click(function(e) {
    showText(false, false, false, false, true, false);
});

slice6.click(function(e) {
    showText(false, false, false, false, false, true);
});

如何使用raphael.js添加onclick事件以在一个容器中显示不同的文本？

1 个答案: