Return 切换后的按钮文本

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

页面上有多个 'triggers' 打开它们的相邻表单。在 toggleForm 函数内部，'if' 语句确定按钮的文本。我存储按钮的当前文本，这样如果表单打开，我可以将按钮更改为 "Close Form" 或 return 到其原始文本。但是，currentText 变量在成为 currentTarget 时存储 "Close Form" 文本。我怎样才能确保按钮的文本 return 恢复到其原始状态？

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

Return 切换后的按钮文本

Return button text after toggle

javascript

jquery

state

if-statement

reactjs