Question

我正在尝试开发自己的进度条。此时，我想在单击按钮时更新进度条。我已经为一个函数分配了一个变量，当单击该按钮时，该函数被调用。

应用程序运行不正常，因为该函数返回一个对象，我需要一个整数。我试图进行转换，但我不能。这是代码：

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $(document).ready(function () {    
            var val = $('#boton').click(function () {
                return Number(Math.floor(Math.random() * 100 + 1));
            });
            $("#porcentaje").text(val + '%');
            $('#progressBar div').css("width", val.toString() + "%");          
        });
    </script>
</head>
<body>
    <form id="formulario">
        <div id="progressBar">
            <div></div>
        </div>
        <div id="porcentaje">
        </div>      
        <input type="button" id="boton" value="Start" />
    </form>
</body>

我该如何解决？

感谢。

Answer 1

.click()将返回调用它的相同jQuery对象，这就是为什么要将Object作为输出。

相反，您只需要移动在事件处理程序中设置text和css的代码，如

＆＃13;

$(document).ready(function() {
  var val;
  $('#boton').click(function() {
    val = Number(Math.floor(Math.random() * 100 + 1));
    $("#porcentaje").text(val + '%');
    $('#progressBar div').css("width", val + "%");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="formulario">
  <div id="progressBar">
    <div></div>
  </div>
  <div id="porcentaje">
  </div>
  <input type="button" id="boton" value="Start" />
</form>

＆＃13;

Answer 2

在这种情况下，

val不是您的想法。 .click()方法返回对jQuery选择器对象的引用，这就是为什么你没有得到数值。见：

＆＃13;

$(document).ready(function() {
  var val = 0;
  $('#boton').click(function() {
    val = Number(Math.floor(Math.random() * 100 + 1));
    $("#porcentaje").text(val + '%');
    $('#progressBar div').css("width", val.toString() + "%");
  });
  setInterval(function(){
     alert("Val is currently: " + val);
  }, 5000);
});

＆＃13;

#progressBar div {height: 10px; background: #eee; width: 0}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formulario">
  <div id="progressBar">
    <div></div>
  </div>
  <div id="porcentaje">
  </div>
  <input type="button" id="boton" value="Start" />
</form>

＆＃13;

在JQuery中为函数赋值

2 个答案: