1

我正在创建一个解剖人，用户可以在其中翻转肌肉，突出显示肌肉，单击时会显示肌肉的名称。通过一个单独的 JQuery，我有一组<dl>s，根据单击的肌肉组显示和隐藏。这在 IE9 和其他现代浏览器中运行良好，但我在 IE8 中遇到了问题。IE8 只想使用生成的 raphael.js 中的代码。所以我需要将 jquery 移动到 raphael 中……我相信这将是一种更优雅的方式。但是，我不确定如何进行此操作。

这是我的代码：

路径.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"',
},
}

初始化.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”部分更改为单击的路径。

我希望这很清楚，任何帮助将不胜感激。

4

1 回答 1

0

Assuming that the dl elements are already created (are they?), I guess you could do something like:

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

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

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

and then in the click handler

$(tags[this.id]).show();
于 2012-05-04T22:41:12.507 回答