如何在此脚本中添加另一个jquery进度条?

时间:2014-07-04 19:17:59

标签: javascript jquery jquery-ui

    <head>
  <meta charset="utf-8">
  <title>jQuery UI Progressbar - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
$(function() {
    $( "#progressbar" ).progressbar({
      value: 0
    })
    .data("value","0");

$(function() {
    $( "#progressbar2" ).progressbar({
      value: 0
    })
    .data("value","0");



    $("#plus").click(function() {
        var currValue = $( "#progressbar" ).data("value");
        currValue = parseInt(currValue) ? parseInt(currValue) : 0;
        if(currValue <= 100) {
            $( "#progressbar" ).progressbar({
              value: currValue+1
            }).data("value",currValue+1);
            $("#progressLabel").html((currValue+1)+"%");
        }    
    });

      $("#plus2").click(function() {
        var currValue = $( "#progressbar2" ).data("value");
        currValue = parseInt(currValue) ? parseInt(currValue) : 0;
        if(currValue <= 100) {
            $( "#progressbar2" ).progressbar({
              value: currValue+1
            }).data("value",currValue+1);
            $("#progressLabel").html((currValue+1)+"%");
        }    
    });

    $("#minus").click(function() {
        var currValue = $( "#progressbar" ).data("value");
        currValue = parseInt(currValue) ? parseInt(currValue) : 0;
        if(currValue > 0) {
            $( "#progressbar" ).progressbar({
              value: currValue-1
            }).data("value",currValue-1);
            $("#progressLabel").html((currValue-1)+"%");
        }    
    });

  });
</script>

<html>
  <div id="progressbar"></div>
  <div id="progressbar2"></div>

<p id="plus">+</p>
<p id="plus2">0</p>
<p id="minus">-</p>

<p id="progressLabel">50%</p>
</html>

在上面的脚本中,我试图添加第二个jquery进度条,该进度条由&#34;加2&#34; element,但是当我尝试运行脚本时,在我添加&#34; progressbar2&#34;之后,进度条都没有出现。谁能告诉我我做错了什么?

0 个答案:

没有答案