javascript - Backbone : Toggle methods on some event

Question

我想要一个按钮来切换主干中的两种方法，但我遇到了问题。总的来说，我对 JS 还很陌生。

如果单击按钮:

• 我想显示隐藏的 div

• 更改单击按钮的文本

然后，如果您再次单击该按钮(其中包含新文本并显示隐藏的 div)

• 更改文本
• 隐藏显示的div

.hide 的第二个方法没有被触发？我想知道这是否是因为 .hide 最初不在 DOM 中，因为它被添加到 show 方法中。只是一种猜测，也许有更好的方法来切换一个类上的方法？

这是我的 JS

'touchstart .share-btn' : 'show',
'touchstart .hide' : 'hide'


    'show' : function (e) {
        var view = this;

        $(e.currentTarget).closest('.tile').find('.share-tools').fadeIn('fast');
        $(e.currentTarget).addClass('hide');
        if ($(e.currentTarget).hasClass('hide')){
             $(e.currentTarget).find('.button-copy').closest('.button-copy').html('close');
        }

    },

    'hide' : function (e) {
        var view = this;
            if($(e.currentTarget).hasClass('hide')) {
            $('.share-tools').fadeOut('fast');
            $(e.currentTarget).removeClass('hide');
            $(e.currentTarget).find('.button-copy').closest('.button-copy').html('share');
        }

    },

Answer 1

也许稍微修改一下你的代码会有帮助。我创建了a working jsfiddle基于我认为您想要实现的目标。

以下是相关查看代码:

var View = Backbone.View.extend({

    ...

    // Make it clear that these are the same element.
    // Ensure they will not both fire by making them exclusive.
    events: {
        'mousedown .share-btn:not(.hide)' : 'show',
        'mousedown .share-btn.hide' : 'hide'
    },

    'show' : function (e) {
        console.log('show');
        var $e = $(e.currentTarget);
        $e.closest('.tile').find('.share-tools').fadeIn('fast', function () {
            $e.addClass('hide');
        });
        $e.find('.button-copy').closest('.button-copy').html('close');
    },

    'hide' : function (e) {
        console.log('hide');
        var $e = $(e.currentTarget);
        $e.closest('.tile').find('.share-tools').fadeOut('fast', function () {
            $e.removeClass('hide');
        });
        $e.find('.button-copy').closest('.button-copy').html('share');
    }
});

您可以在这里找到工作的 jsfiddle:http://jsfiddle.net/somethingkindawierd/7rfs9/