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