使用JavaScript更改跨度内容

Question

我对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();
    });
}

第一次弹出时，它可以正常运行，但是没有其他时间……我认为问题是我的“如果”不起作用，我不知道为什么。

（对不起我的英语不好）

Answer 1

 !$(".nomUser").length 

这意味着没有这样的元素。 采用

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

如果要检查是否为空

Answer 2

您的两个检查长度的if语句未检查是否存在正确的元素，这导致试图追加的选择器找不到任何内容。

第一次通过您的dom看起来像：

<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();
    });
}