jquery - Changing span content with javascript -
i'm quite new jasascript , jquery , i'm trying create pop-up appear when user have reach achivement. pop-up have user name , tittle of achivement. here's html
<div class="popup"> <img src="" alt="avatar" id="imgpop"/> <h3 class="nomuser"><span></span></h3> <p class="popatteint">a atteint l'objectif:</p> <p class="objatteint"><span></span></p> </div>
and javascript
function afficher(nom,objectif){ if(!$(".nomuser").length){ $(".nomuser").append("<span></span>"); } if(!$(".objatteint").length){ $(".objatteint").append("<span></span>"); } $(".nomuser span").append(nom); $(".objatteint span").append(objectif); $(".popup").animate({opacity:100},1000); $(".popup").delay(1000).animate({opacity:0},2000,function(){ $(".nomuser span").remove(); $(".objatteint span").remove(); }); }
the first time pop up works perfecly doesn't other time... think problem "if" aren't working , can't figure out why.
(sorry english)
your 2 if statements checking length aren't checking presence of right element, causing selector that's trying append not find anything.
the first time through dom looks like:
<div class="nomuser"> <span></span> </div>
but second time through, like:
<div class="nomuser"> </div>
when code append 'nom' run, doesn't execute because can't find span nested under element nomuser class
$(".nomuser span").append(nom); // not found :-(
the following should work:
function afficher(nom,objectif){ if(!$(".nomuser span").length){ $(".nomuser").append("<span></span>"); } if(!$(".objatteint span").length){ $(".objatteint").append("<span></span>"); } $(".nomuser span").append(nom); $(".objatteint span").append(objectif); $(".popup").animate({opacity:100},1000); $(".popup").delay(1000).animate({opacity:0},2000,function(){ $(".nomuser span").remove(); $(".objatteint span").remove(); }); }
Comments
Post a Comment