把文本放在div jquery里面

时间:2016-10-16 00:17:58

标签: javascript jquery html

我试图在div容器中标记我的图片,其中h2标签中有一个名称,底部带有p标签的健康点,但是当我使用.text时它不起作用。我试图在js文件中插入文本," Darth Vader"进入div容器中的div h2:charContainer

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Week 4 Game</title>
    <link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

    <!-- Added link to the jQuery Library -->
     <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256- laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>

    <style type="text/css">
    .characters
    {
        width: 100%;
        overflow: auto;
        margin-left: 50px;
    }
    .vade, .skywalker, .obi, .dmaul
    {
        width: 130px;
        height: 100px;
        margin-top: 30px;
        margin-left: 35px;
    }
    .charContainer, .charContainer1, .charContainer2, .charContainer3
    {
        width: 200px;
        height: 170px;
        float: left;
        border: solid;
        border-color: green; 
        background-color: white;
    }

    h2
    {
        font-size: 50px;
        width: 100%;
        margin-left: 50px;
    }
    .your
    {
        width: 100%;
    }
    .enemies
    {
        width: 100%;
        overflow: auto;
        margin-top: 50px;
    }
    .c1
    {
        width: 100%;
        font-size: 20px;
    }
    </style>

    </head>
    <body>
    <div class = "characters">
    <div class="charContainer">
        <h2 id="c1"></h2>
        <img class="vade" src="assets/images/vader.jpg">
        <p class="c1hp"></p>
    </div>
    </div>
    <div class="your">
    <h2>Your Character</h2>
    </div>
    <div class="enemies">
         <img class="dmaul" src="assets/images/maul.png">
    </div>


    </body>
    </html>

JS档案

     $(document).ready(function(){
      $('#c1').text("Darth Vader");


     }

1 个答案:

答案 0 :(得分:1)

这只是你JS文件中的一个错字。

替换:

$(document).ready(function(){
  $('#c1').text("Darth Vader");
}

使用:

$(document).ready(function(){
  $('#c1').text("Darth Vader");
});

更新10月16日01:46

  1. 您的jQuery库脚本导入包含sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=之间的额外空格

  2. 您不能在index.html中的任何位置引用您的JS文件。

  3. 添加:

    <script src="NAME-OF-JS-FILE.js"></script>

    在结束</body>代码之前