Question

我正在学习JQuery，我想我无法理解一些基础知识。每次单击其中一个单选按钮时，我都会尝试将进度条的宽度（就像它正在移动一样）更改为+ 2％。但我的功能是错误的（值+ 2）。我将不胜感激任何评论。当我将它改为某个固定值时，它并不会真的像那样。我想改变方法＆＃39;每次初始化整个事物。所以我的问题是将结果写入文件的最佳方法是什么（我现在使用＆＃39;提交＆＃39;现在）并增加宽度＆＃39;进度条的值同时？任何评论都非常感谢。

<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#progressbar {
  width: 2%;
  height: 30px;
  background-color: #1D1387;
  text-align: center;
  line-height: 30px;
  color: white;
}
</style>
    <head>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
        <script>  
 $(document).ready(function() {   
   $('input[name=score]').change(function(){  
        $('form').submit();
        <!-- progress bar moves on 2% every time the radio button is clicked (form is submitted)-->
        $('#progressbar').css('width', function(index, value){
        return value + 2;
        });
   });  
  });  
</script>
    </head>

<form>
<p>Please select one of the variants below:</p><br />
<h2>word</h2>
<br />
<input type="hidden" name="word" value="{{ word }}"/><br />
<label class="rad"><input type="radio" name="score" value="var1" />variant1</label>
<label class="rad"><input type="radio" name="score" value="var2" />variant2</label>
<label class="rad"><input type="radio" name="score" value="var3" />variant3</label>
<label class="rad_other"><input type="radio" name="score" value="var4" />variant4</label><br />
<br />
</form>
<div id="myProgress">
  <div id="progressbar">0/50</div>
</div>
</body>
</html>

Answer 1

如果您提交表单，则表示您正在加载新页面（即使它是同一页面）并且丢失了进度条更改。

如果删除submit()并更改增加宽度的方式，则代码可以正常工作：

$('input[name=score]').change(function(){
    $('#progressbar').css('width', function(index, value){
        return "+=2%";
    });
});

您的请求的解决方案是使用一些Ajax并执行POST请求（请参阅jQuery post()）。在SO上有一个问题，您可以在哪里找到执行此操作的方法：How to use jquery $.post() method to submit form values

另一种解决方案是在生成页面时使用后端语言设置进度条宽度，并跟踪每个请求的进度。

Answer 2

首先，您在JavaScript中使用HTML评论（），该评论使用//或/* ... */条评论。

其次，阅读css(...)的文档，您将看到提供给该函数的值可能与样式表中的值不同。在函数中放置一个简单的console.log(value)，我们看到它以像素为单位获取值。

Here is a working example。我更改了注释并将百分比放在变量中。我不得不删除form.submit()以使JSFiddle工作，但你可以保留它。

改变宽度＆＃39; CSS中使用JQuery的进度条

2 个答案: