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/

Answer 2

尝试在事件侦听器中返回false，以防止在第一次单击时调用这两种方法。

Backbone：在某些事件上切换方法

2 个答案: