samedi 27 février 2016

Return button text after toggle

I have the following React component:

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

There are multiple 'triggers' on the page which open up their adjacent forms. Inside the toggleForm function, the 'if' statement determines the text of the button. I store the buttons current Text so that if the form is open, I can change to "Close Form" or else return the button to its original text. However the currentText variable is storing the "Close Form" Text as it becomes the currentTarget. How can I make sure the button's text returns to its original state?

Aucun commentaire:

Enregistrer un commentaire