Question

我是jasascript和jQuery的新手，我试图创建一个弹出窗口，当用户达到成就时会出现这个弹出窗口。此弹出窗口将具有用户名和成就的tittle。这是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();
    });
}

第一次弹出它完美地工作，但它没有任何其他时间...我认为问题是我的＆＃34; if＆＃34;没有工作，我无法弄清楚原因。

（对不起我的英文）

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类的元素下的span

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

使用javascript更改跨度内容

2 个答案: