javascript - 切换后返回按钮文本

Question

我有以下 React 组件:

var $ = require('jquery');

module.exports = {
    trigger: '.form-trigger',
    form: '.financial-form',
    init: function() {
        $(this.trigger).click(this.toggleForm.bind(this));
    },
    toggleForm: function(e) {
        // define currentTarget
        var currentTarget = $(event.currentTarget);
        // define current Text
        var currentText = currentTarget.html();
        // Prevent anchor click default
        e.preventDefault();
        // Remove any active classes
        currentTarget.next(form).slideToggle("fast");
        // console.log(currentText);
        if ($(this.form).is(":visible")){
            // $(element).is(":visible")
            currentTarget.html("Close Form");
        } else {
            currentTarget.html(currentText);
        }
    }
};

页面上有多个“触发器”可以打开相邻的表单。在 toggleForm 函数内部，“if”语句确定按钮的文本。我将按钮存储为当前文本，这样如果表单打开，我可以更改为“关闭表单”或者将按钮返回到其原始文本。但是，当 currentText 变量成为 currentTarget 时，它正在存储“关闭表单”文本。如何确保按钮的文本返回到其原始状态？

Answer 1

可以将原始文本存储在jQuery的data()

中

var $ = require('jquery');

module.exports = {
    trigger : '.form-trigger',
    form    : '.financial-form',
    init    : function() {
        $(this.trigger).click(this.toggleForm.bind(this));
    },
    toggleForm: function(e) {
        e.preventDefault();

        var currentTarget = $(event.currentTarget),
            flag          = $(this.form).data('flag');

        currentTarget.next(form).slideToggle("fast");

        if ( !currentTarget.data('text') ) {
            currentTarget.data('text', currentTarget.text());
        }

        currentTarget.text(flag ? currentTarget.data('text') : "Close Form");
        $(this.form).data('flag', !flag);
    }
};