Я совершенно новый с jasascript и jQuery, и я пытаюсь создать всплывающее окно, которое появится, когда пользователь достигнет цели. Это всплывающее окно будет иметь имя пользователя и название достижения. Здесь 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>
и это 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();
});
}
в первый раз, когда он всплывает, он работает безупречно, но это не в любой другой момент... Я думаю, проблема в том, что мои "если" не работают, и я не могу понять, почему.
(Извините за мой английский)
Ваши два оператора if, проверяющие длину, не проверяют наличие правильного элемента, который вызывает ваш селектор, который пытается добавить, чтобы ничего не находить.
В первый раз через ваш дом выглядит:
<div class="nomUser">
<span></span>
</div>
но во второй раз это выглядело бы так:
<div class="nomUser">
</div>
Когда запускается код для добавления "nom", он не выполняется, поскольку он не может найти диапазон, вложенный под элементом с классом nomUser
$(".nomUser span").append(nom); // Not found :-(
Следующее должно работать:
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();
});
}
!$(".nomUser").length
Это означает, что такого элемента нет. использование
if ($(".nomUser").text().length == 0)
Если вы хотите проверить его на пустой