1

我正在創建一個解剖學家,用戶可以翻轉肌肉,肌肉突出顯示,點擊時他們顯示肌肉的名稱。通過單獨的JQuery,我有一組<dl> s顯示和隱藏取決於肌肉羣點擊。這在IE9和其他現代瀏覽器中工作正常,但我在IE8中遇到問題。 IE8只想使用生成的raphael.js中的代碼。所以我需要將jquery轉換成raphael ......我相信這將是一個更優雅的方式。但是,我不確定如何繼續此操作。raphael.js IE8和Jquery

這裏是我的代碼:

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

}); 

在init.js代碼中有一個click(function()生成一個彈出式的肌肉組。我怎麼能添加一個代碼,允許其他jQuery發生取決於用戶點擊的路徑?例如:

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

其中,根據點擊的路徑,類的「pathnamehere」部分會發生變化。

我相信這行添加路徑名彈出:

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

我想以某種方式改變類路徑的「pathnamehere」部分點擊。

我希望這是明確的,任何幫助將不勝感激。

+0

我不明白用$('。tag-pathnamehere')'選擇的元素是什麼。這是否指向路徑本身或其他html元素?這裏有一個[jsfiddle](http://jsfiddle.net/mihaifm/ZZp25/4/)代碼 – mihai

+0

'$('tag-pathnamehere')'指的是其他元素。將會有幾個帶有.tag-neck或.tag-chest類的'dl',我想根據點擊的路徑顯示或隱藏。只需要改變'pathnamehere'方面就可以讓'tag-'部分保留下來,並且可以簡單地使用路徑名稱屬性。 – whildkatz

+0

爲什麼不使用HTML5的'data-'自定義屬性而不是濫用'classname'? –

回答

0

假設dl元素已經創建(是誰?),我想你可以這樣做:

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

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

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

然後在click處理

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

我確實已經創建了dl個元素。您的解決方案看起來很有前途,但我無法實現。有沒有辦法檢查點擊路徑時變量的顯示方式? – whildkatz

+0

是啊,如果你知道如何使用螢火蟲或鉻檢查器,你可以在點擊處理程序中放置一個斷點 – mihai

+0

謝謝你。我有很多要學習的。有趣的是,我得知'var tagname =「.tag-」+ paths [muscles] .name;'引用了paths.js中的最後一個路徑名,而不是被單擊的路徑。任何想法爲什麼? – whildkatz