raphael.js IE8 et Jquery

Question

Je crée un homme anatomique où l'utilisateur peut se retourner sur les muscles, les muscles sont mis en évidence et quand on clique dessus, ils affichent le nom du muscle. Par le biais d'un JQuery séparé, j'ai un groupe de <dl> qui s'affiche et se cache en fonction du groupe musculaire cliqué. Cela fonctionne très bien dans IE9, et d'autres navigateurs modernes, mais j'ai un problème avec IE8. IE8 veut seulement utiliser le code dans le raphael.js généré. J'ai donc besoin de déplacer la jquery dans le raphael ... ce qui, je suis sûr, sera une façon plus élégante de le faire. Cependant, je ne suis pas sûr de la façon de procéder.

Voici mon code:

paths.js

var paths = { 
neck: { 
    name: 'neck', 
    path: 'd="M412.294,73.035c0,0,7.661,28.869,9.406,31.78c1.746,2.911,4.657,2.911,9.896,2.911 s9.313-1.746,9.896-5.239c0.582-3.493,6.985-28.523,6.985-28.523s-2.963,2.599-6.232,5.984c-2.543,2.632-7.2,5.904-11.088,5.904 c-3.889,0-6.705-2.431-10.367-5.04C418.063,78.868,418.08,79.22,412.294,73.035z"', 
}, 
pecks: { 
    name: 'Pecks', 
    path: 'd="M379.581,117.994c0,0,0.396-1.586,6.936-4.558c6.539-2.972,13.475-5.351,16.844-6.737 c3.369-1.387,4.559-1.784,4.559-1.784s13.674,2.973,15.061,3.17c1.387,0.198,4.36,1.982,8.72,1.982s9.511-1.387,11.097-2.18 s10.307-2.973,11.693-3.171s1.387-0.198,1.387-0.198s12.286,3.369,16.845,4.36c4.558,0.991,8.917,2.378,9.116,3.765 c0.197,1.387,1.584,4.954,1.584,6.341s-0.197,5.945-0.396,6.738c-0.198,0.792-3.171,15.457-4.757,21.997 c-1.585,6.54-1.188,8.918-7.331,11.494s-10.899,7.53-22.79,2.378s-13.277-5.549-17.241-5.152s-11.098,3.963-14.862,5.351 c-3.766,1.387-16.251,2.179-20.412-0.198c-4.162-2.378-10.9-9.314-12.881-16.844c-1.981-7.531-3.963-16.052-4.359-17.638 C377.995,125.525,377.798,121.165,379.581,117.994z"', 
}, 
} 

init.js

$(function(){ 

var r = Raphael('man', 500, 573), 
    attributes = { 
     fill: '#204ad3', 
     opacity: '0.0', 
     'stroke-linejoin': 'round' 

    }, 
arr = new Array(); 

var id = 0; 

for (var muscles in paths) { 

    var obj = r.path(paths[muscles].path); 

    obj.attr(attributes); 

    obj.node.id = "muscle" + id; 
    id++ 

    arr[obj.id] = muscles; 

    obj 
    .hover(function(){ 
     this.animate({ 
      fill: '#204ad3', 
      opacity: '0.3' 
     }, 300); 
    }, function(){ 
     this.animate({ 
      fill: attributes.fill, 
      opacity: attributes.opacity 
     }, 300); 
    }) 

    .click(function(){ 
     document.location.hash = arr[this.id]; 

     var point = this.getBBox(0); 

     $('#man').next('.point').remove(); 

     $('#man').after($('<div />').addClass('point')); 

     $('.point') 
     .html(paths[arr[this.id]].name) 
     .prepend($('<a />').attr('href', '#').addClass('close').text('Close')) 
     .css({ 
      left: point.x+(point.width/2)-80, 
      top: point.y+(point.height/2)-20 
     }) 
     .fadeIn(); 

    }); 

    $('.point').find('.close').live('click', function(){ 
     var t = $(this), 
      parent = t.parent('.point'); 

     parent.fadeOut(function(){ 
      parent.remove(); 
     }); 
     return false; 
    }); 
} 

}); 

Dans le code init.js il y a un click(function() qui génère un popup pour le muscle groupe. Comment pourrais-je ajouter un code qui permettrait à d'autres jquery de se produire en fonction du chemin sur lequel l'utilisateur clique? Quelque chose comme:

$("dl").hide().delay(100);$('.tag-pathnamehere').show(); 

où 'pathnamehere' une partie de la classe changerait en fonction du chemin cliqué.

Je pense que cette ligne ajoute le nom de chemin de la fenêtre contextuelle:

(paths[arr[this.id]].name) 

Je voudrais changer en quelque sorte la partie « pathnamehere » de la classe sur le chemin cliqué. J'espère que c'est clair et toute aide serait très appréciée.

Answer 1

En supposant que les dl éléments sont déjà créés (sont-ils?), Je suppose que vous pourriez faire quelque chose comme:

arr = new Array(); 
tags = new Array(); 

... 
arr[obj.id] = muscles; 

tags[obj.id] = ".tag-" + paths[muscles].name; 

puis dans le gestionnaire click

$(tags[this.id]).show();