Question

我正在创建一个带有滑动手风琴区域的侧边栏，这样当您点击标题时，相关内容就会切换可见性，如下面的代码部分所示。 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);
        });
    });
}

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

        });
    }
};

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

1 个答案: