Question

在以下代码中，我想在单击svg符号时创建类似按钮的功能。我无法获得sPaper，sPolyFill和sPolyEmpty的价值。到目前为止，他们返回undefined。

我需要将symbolAnim函数集成到like和unlike函数中。我怎样才能做到这一点？

var LikeButtonView = BaseButtonView.extend({ 

    template: _.template($('#like-button-test').html()),
    sPaper: null,
    sPolyFill: null,
    sPolyEmpty: null,

    initialize: function (options) {
      BaseButtonView.prototype.initialize.apply(this, [options]); // inherit from BaseButtonView
      this.butn = $("button.heart-icon", this.$el);
      this.sPaper = Snap(heartIcon.get(0));
      this.sPolyFill = sPaper.select('.symbol-solid');
      this.sPolyEmpty = sPaper.select('.symbol-empty');
    },

    like: function () {
        console.log("Like clicked");
        if (this.butn.hasClass("isLiked")) {
            this.unlike();
        } else if (this.butn.hasClass("unliked")){
            this.butn.removeClass("unLiked");
            this.butn.addClass("isLiked");
            this.addBlur();
        }
    },

    unlike: function () {
        this.butn.removeClass('isLiked');
        this.butn.addClass("unLiked");
        this.addBlur(); 
    },

    symbolAnim: function(heartIcon, isLiked) {

        if (isLiked === false) {
            sPolyFill.animate({ transform: 't9,0' }, 300, mina.easeinout);
            sPolyEmpty.animate({ transform: 't-9,0' }, 300, mina.easeinout);
        } else {
            sPolyFill.animate({ transform: 't0,0'}, 300, mina.easeinout);
            sPolyEmpty.animate({ transform: 't0,0' }, 300, mina.easeinout);
        }
    }

});

Answer 1

好的，所以我通过定位this.butn

来获取对象

initialize: function (options) {
      BaseButtonView.prototype.initialize.apply(this, [options]); // inherit from BaseButtonView
      this.butn = $("button.heart-icon", this.$el);
      this.svgNode = this.butn.find("svg").get(0);
      this.sPaper = Snap(this.svgNode);
      this.sPolyFill = this.sPaper.select('.symbol-solid');
      this.sPolyEmpty = this.sPaper.select('.symbol-empty');
      console.log(this.sPaper);

现在我需要在symbolAnim和like功能

中实现unlike的功能

Answer 2

对于我喜欢的按钮功能，它在事件中被触发为"click selector": "like"，我提出了以下内容。但是这只能工作一次。因此，当我第一次添加类liked时单击该按钮并删除类unliked，这是html元素的默认值。然后，当再次单击它时，它将删除liked类并添加unliked类。到目前为止它按预期工作。问题是当我再次点击它，再次喜欢它时，没有任何反应。它不再调用like函数，类仍然是unliked。

导致此问题的原因是什么？如何解决？

like: function () {     
    if (this.butn.hasClass("liked")) {
        this.unlike();
    } else if (this.butn.hasClass("unliked")) {
        this.controller();
        console.log("Like clicked");
    }
},

controller: function () {
    this.butn.removeClass("unliked");
    this.butn.addClass("liked");
    this.sPolyFill.animate({ transform: 't9,0' }, 300, mina.easeinout);
    this.sPolyEmpty.animate({ transform: 't-9,0' }, 300, mina.easeinout);
},

unlike: function () {
    this.butn.removeClass('liked');
    this.butn.addClass("unLiked");
    this.sPolyFill.animate({ transform: 't0,0'}, 300, mina.easeinout);
    this.sPolyEmpty.animate({ transform: 't0,0' }, 300, mina.easeinout);
    console.log("Unliked"); 
}

获取骨干视图中snap.svg对象的值

2 个答案: