Изменение содержания диапазона с помощью JavaScript

0

Я совершенно новый с 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();
    });
}

в первый раз, когда он всплывает, он работает безупречно, но это не в любой другой момент... Я думаю, проблема в том, что мои "если" не работают, и я не могу понять, почему.

(Извините за мой английский)

Теги:

2 ответа

0
Лучший ответ

Ваши два оператора 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();
    });
}
0
 !$(".nomUser").length 

Это означает, что такого элемента нет. использование

if ($(".nomUser").text().length == 0)

Если вы хотите проверить его на пустой

Ещё вопросы

Сообщество Overcoder
Наверх
Меню