创建新对象时利用JavaScript中的数组值

时间:2018-08-08 14:46:52

标签: javascript jquery loops variables

我是使用JavaScript的新手,我的同事向我介绍了jQuery。现在,我正在测试如何在运行时使用声明的变量来创建进度条,并且我不知道如何创建一个<div>及其相应的计数器以及CSS动画进度条

请检查变量counter2,因为它被视为字符串而不是其内部值。

我希望这对所有人都有意义,感谢您检查此项目。

function clickme2(){
        var values1 = [40,30];
        for (counter2 = 0; counter2 <= 1; counter2++) {
          var css =$(".progressbar[counter2]{height: 20px; background: #4169E1; width: 0; text-align: center; border: 1px;} ")
          $("head").append(css)
          var div =$("<br> <p id = progressnum>this is a progress bar [counter2]</p><div class = 'pp'><div class='progressbar[counter2]'> </div></div>");
          $("body").append(div);
            $('.progressbar').animate(
              {
                width: values1[counter2] + "%"
              },
              {
                duration: 500
              }
            );

        }
      }
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <style type='text/css'>
  </style>
  
  <body>
    <br>
      <button id="add" onclick="clickme2()">Add</button>
    <br>
   
   <script>
    //refer to my javascript code
   </script>
   
   </body>
</html>

1 个答案:

答案 0 :(得分:1)

要在字符串中使用变量,您必须将其连接起来,或使用模板文字。如果仅将其粘贴在字符串中,则会将其视为字符串,因为这是javascript的设计方式。

//concatenation
var x = 'me';
var aString = 'Please say hello to '+ x;

//template literal
var x = 'me';
var aString = `Please say hello to ${x}`;