Javascript Raphael.js单击事件

我想用Raphael.js来绘制地图。我希望能够点击地图外的一个按钮，以获得一组状态，使其成为不同的颜色。我已经试着调整JSFIDLE（见下文）一段时间了，但就是无法让它工作。我错过了什么

HTML

JS小提琴是

感谢您的建议

请尝试以下方法：

var paper = Raphael(10, 50, 960, 560);
var attr = {
    fill: 'blue',
    stroke: '#000',
        'stroke-width': 5,
    cursor: 'pointer'
};

var elementSet = paper.set();
var cn = {};
cn.a =     paper.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z").attr(attr);
cn.b = paper.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z").attr(attr);
cn.c = paper.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z").attr(attr);

elementSet.push(cn.a, cn.b); //define what is in the set

var button = document.getElementById('show');

button.onclick = function () {
    elementSet.animate({
        fill: '#000'
    }, 500);
};

---

目前，您是否只在JSFIDLE中测试代码？如果是这样，您的代码将无法计算“$”，因为没有加载类似Prototype或jQuery的库。这是一个很好的观点。非常感谢。

    var paper = Raphael(10, 50, 960, 560);
var attr = {fill: 'blue',
stroke: '#000',
'stroke-width': 5,
cursor: 'pointer'};

var elementSet = paper.set();
var cn = {};
   cn.a = paper.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z").attr(attr);
   cn.b = paper.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z").attr(attr);
   cn.c = paper.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z").attr(attr);

 elementSet.push(cn.a, cn.b); //define what is in the set


$('#show').on( 'click', function() {
   elementSet.animate({
            fill: '#000'
   }, 500);
});

var paper = Raphael(10, 50, 960, 560);
var attr = {
    fill: 'blue',
    stroke: '#000',
        'stroke-width': 5,
    cursor: 'pointer'
};

var elementSet = paper.set();
var cn = {};
cn.a =     paper.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z").attr(attr);
cn.b = paper.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z").attr(attr);
cn.c = paper.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z").attr(attr);

elementSet.push(cn.a, cn.b); //define what is in the set

var button = document.getElementById('show');

button.onclick = function () {
    elementSet.animate({
        fill: '#000'
    }, 500);
};