4

嗨，我想在单击 raphael 生成的对象http://jsfiddle.net/v2Ykt/后添加类

我试过这个

$('#inter-mapka a').click(function(){
        $('#inter-mapka a').removeClass("active");
        $(this).addClass("active");
    });

但什么都没有发生，我该怎么做

拉斐尔

// A1   
    paper.path("M9,163.334 L12,163.25 L18.5,157 L80.958,157 L80.958,192 L64.5,192 L9,177.084Z").attr({"fill":"#6e3315", "stroke-width": 0, "fill-opacity": 0, "stroke": "transparent", "title": "budynek A1"}).mouseover(
        function () {
                this.animate({"fill-opacity": .7}, 200);
            }).mouseout(function () {
                this.animate({"fill-opacity": .0}, 200);
        });

生成的 HTML

<div id="inter-mapka">

    <a title="budynek A1"><path style="fill-opacity: 0;" fill="#6e3315" stroke="none" d="M9,163.334L12,163.25L18.5,157L80.958,157L80.958,192L64.5,192L9,177.084Z" stroke-width="0" fill-opacity="0"/></a>

...

</div>
4

1 回答 1

3

抱歉耽搁了。我现在玩过这个，唯一能让它做你想做的事情的唯一方法就是完全在 Raphael 中——也许 DOM 元素是由 Rapchael“管理”的，所以 jQuery 并没有真正正确地启动

编辑我已经对此进行了重构以简化http://jsfiddle.net/joevallender/v2Ykt/6/

var paper = new Raphael(document.getElementById('inter-mapka'), 172, 276);

var a1 = paper.path("M9,163.334 L12,163.25 L18.5,157 L80.958,157 L80.958,192 L64.5,192 L9,177.084Z").attr({"title": "budynek A1"});

var a2 = paper.path("M3.875,141H38c0,0,7.75-3.875,10-8c0-4.5,0-18.5,0-18.5s0.375-5.625-11.125-5.625    s-30.719,0-30.719,0L6.125,110H5l-0.012,10.969L3.875,121V141z").attr({"title": "budynek A2"});

var a3 = paper.path("M81.125,93.188h-30c0,0-7.125-1.938-9.25-7.438c0-5.625,0-18.875,0-18.875    S42.503,61.75,48.001,61c5.624,0,33.124,0,33.124,0V93.188z").attr({"title": "budynek A3"});    

var a4 = paper.path("M5,39.875l7.875,6H40.75c0,0,8.375-0.25,7.25-7.5c0-7.25,0.104-19,0.104-19L44,10H5V39.875z").attr({"title": "budynek A4"});

var a5 = paper.path("M80,10v30.375c0,0,1.125,5,6,5.5c4.875,0,28.75,0,28.75,0L118.875,40V10H80z").attr({"title": "budynek A5"});

var all = [a1,a2,a3,a4,a5];

for(var i = 0; i < all.length; i++) {
  all[i].attr({"fill":"#6e3315", "stroke-width": 0, "fill-opacity": 0, 'stroke': '#f00'});
  all[i].mouseover(
    function () {
      this.animate({"fill-opacity": .7}, 200);
    }).mouseout(function () {
      this.animate({"fill-opacity": .0}, 200);
    });
  all[i].click(function(){
    clearAll();
    this.attr({"stroke-width": 1});
  });
}

function clearAll(){
  for(var i = 0; i < all.length; i++) {
    all[i].attr({"stroke-width": 0});
  }
}
于 2012-08-22T15:17:14.310 回答