Wie kann ich ein onclick-Ereignis mit raphael.js hinzufügen, um anderen Text in einem Container anzuzeigen?

Question

Ich versuche, ein Onclick-Event für die Svg Donutchart zu erstellen. Per Default sollte Text1 angezeigt werden. Durch Klicken auf ein anderes Segment sollte text1 mit dem entsprechenden Text getauscht werden. Der Textabschnitt sollte neben dem Kreisdiagramm stehen.

jsfiddle demo

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

Answer 1

Fügen Sie die showText Funktion es einfacher zu machen, einen bestimmten Textblock ein-/auszublenden.

Dann ändern Sie die Klick-Listener zu den folgenden. Sie können keine Funktion an einen Klick-Listener übergeben.

Sie können entweder eine anonyme Funktion wie diese passieren:

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

oder Sie können mit dem Klick eine Funktion zu übergeben erstellen.

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

e.click(onclick); 

Hinweis: Wenn Sie e nicht die Ereignisinformationen benötigen, wird die Funktion nicht übernehmen müssen Argument.

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); 
});