I want to change some text and data-attribute value in my HTML, explicitly the modal-footer when I am on login page(section in the modal). It works however once I leave that page the change it remains, which I don't want. I want it to change back to default once I leave that page.
How can I do that?
function showPages() {
let $aBtnShowPages = $(".btnShowPage");
// this is an array
for (let i = 0; i < $aBtnShowPages.length; i++) {
$aBtnShowPages.eq(i).click(function () {
// Hide the pages
let $aPages = $('.page');
for (let j = 0; j < $aPages.length; j++) {
$aPages.eq(j).css("display", "none");;
}
let $sDataAttribute = $(this).attr("data-showThisPage");
//console.log($sDataAttribute);
$($sDataAttribute).css("display", "block");
if ($sDataAttribute === '#login') {
$('.modal-footer span').text("Don't have a LimeLINE account yet?");
$('.modal-footer a').text('Signup').attr("data-showThisPage", "#signup_general");
} else {
// what should I write here
}
});
}
}
the HTML part:
<div class="container">
<div class="row">
<!--Signup Modal Structure -->
<div id="modal" class="modal">
<div class="modal-content">
<section id="signup_general" class="page">
<div class="row">
<a href="#!" class="col s6 modal-action modal-close">
<i class="fa fa-times-circle-thin fa-2x" aria-hidden="true"></i>
</a>
</div>
<div class="row">
<a class="col s12 waves-effect waves-light btn-large social facebook">
<i class="fa fa-facebook"></i> Sign up with facebook</a>
</div>
<div class="row">
<a class="col s12 waves-effect waves-light btn-large social google">
<i class="fa fa-google"></i> Sign up with google</a>
</div>
<div class="row">
<span class="col s12 center">
or
</span>
</div>
<div class="row">
<a class="col s12 waves-effect waves-light btn-large social lime btnShowPage" data-showThisPage="#signup_email">
<i class="fa fa-envelope"></i>Sign up with email</a>
</div>
</section>
<!--Signup with email section -->
<section id="signup_email" class="page">
<div class="row">
<div class="col s12 center">
<span>Signup with</span>
<a href="#!" class="">Facebook</a>
<span>or</span>
<a href="#!" class="">Google</a>
</div>
</div>
<div class="row">
<span class="col s12 center">
or
</span>
</div>
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="mobile_number" type="number" class="validate">
<label for="mobile_number">Mobile Number</label>
</div>
</div>
<div class="file-field input-field">
<div class="btn lime">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload your profile image">
</div>
</div>
<div class="row">
<a class="col s12 waves-effect waves-light btn-large lime">
</i>Sign up</a>
</div>
</form>
</section>
<section id="login" class="page">
<div class="row">
<a class="col s12 waves-effect waves-light btn-large social facebook">
<i class="fa fa-facebook"></i>Log in with facebook</a>
</div>
<div class="row">
<a class="col s12 waves-effect waves-light btn-large social google">
<i class="fa fa-google"></i> Log in with google</a>
</div>
<div class="row">
<span class="col s12 center">
or
</span>
</div>
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="mobile_number" type="number" class="validate">
<label for="mobile_number">Mobile Number</label>
</div>
</div>
<div class="row">
<a class="col s12 waves-effect waves-light btn-large lime">
</i>Log In</a>
</div>
</form>
</section>
<div class="row">
<div class="col s12 modal-footer">
<span class="col s9">Already have a LimeLINE account?</span>
<a class="col s3 btnShowPage" data-showThisPage="#login">Login</a>
</div>
</div>
</div>
</div>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire