如何使用 Raphaeljs 和 jQuery 切换 svg 属性答案

【问题标题】：How to toggle svg properties using Raphaeljs and jQuery如何使用 Raphaeljs 和 jQuery 切换 svg 属性
【发布时间】：2014-09-23 15:56:13
【问题描述】：

我正在制作一个带有可滑动、类似手风琴的区域的侧边栏，以便当您单击标题时，相关内容会根据下面的代码部分切换可见性。 initAccordion 函数还在标题后附加一个 svg“+”以指示其操作。

最后的任务是让 cross 变量中保存的 svg 在每次点击时旋转 45 度 - 这是我遇到问题的地方。

显然，makeButtons 函数中的两个语句在它们的包含函数之外是不可访问的。我试图重构代码，但它最终变得一团糟，我不禁想到必须有一个简单的解决方案。

toggleContent : function(){
    this.toggleClass('on').next().slideToggle(200);
    cross.transform("r45");
},

makeButtons : function(el) {
    var btn = Raphael(el,15,15);
    var cross = btn.path(".....");
},

initAccoridon : function(){
    $('#eventSideBar').find('h3').each(function(){
        var btn = $('<div/>', {
            class : 'sideBarBtn'
        });
        btn.appendTo(this);
        var btnContainer = btn.get(0),
            $this = $(this);
        sidebar.makeButtons(btnContainer);
        $this.on('click', function(){
            sidebar.toggleContent.call($this);
        });
    });
}

我不确定这是否更适合 SO 的代码审查部分 - 如果是，请道歉；我可以根据要求移动它。

Fiddle here...

编辑：虽然有多个元素，但我无法让相应的 svg 旋转；只是最后一个。 Fiddle here，更新代码：

makeSvg : function(el) {
    this.btn = Raphael(el,15,15);
    this.cross = this.btn.path(".....");
    return {
        btn : this.btn,
        cross : this.cross
    };
},

toggleContent : function(){
    if (this.hasClass('on')) {
        sidebar.cross.transform("r0");
    } else {
        sidebar.cross.transform("r45");
    };
    this.toggleClass('on');
},

initAccordion : function(){
    $('body').find('h3').each(function(){
        var btn = $('<div/>', {
            class : 'sideBarBtn'
        });
        btn.appendTo(this);

        var btnContainer = btn.get(0),
            $this = $(this);

        sidebar.makeSvg(btnContainer);

        $this.on('click', function(){
            sidebar.toggleContent.call($this);
        });
    });
}

【问题讨论】：

基本示例小提琴将有助于玩。你不能从 makeButtons 返回你的交叉元素，然后将它传递给你的 toggleContent func 吗？
@Ian 请参阅附加的小提琴。你的建议很有道理，但我还是一个 JavaScript 初学者，无法从 makeButtons 返回任何有用的东西......

标签： javascript jquery svg raphael

【解决方案1】：

您将需要传递相关元素的参数或以某种方式捕获它。此示例应该适用于多个对象，您只需要添加反向操作即可。

jsfiddle

相关位...

var sidebar = {

    makeSvg : function(el) {
        var btn = Raphael(el,15,15);
        return btn.path(pathString).attr({fill:"#fff",stroke:"none"});
    }, 

    toggleContent : function( myCross ){
        this.toggleClass('on');
        myCross.transform("r45");
    },

    initAccordion : function(){
        $('body').find('h3').each(function(){
            var btn = $('<div/>', {
                class : 'sideBarBtn'
            });
            btn.appendTo(this);

            var btnContainer = btn.get(0),
                $this = $(this);

            var myCross = sidebar.makeSvg(btnContainer);

            $this.on('click', function(){
                sidebar.toggleContent.call($this, myCross);
            });

        });
    }
};

【讨论】：