使用JQuery更改CSS中进度条的“宽度”

Changing 'width' of the progress bar in CSS with JQuery

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<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'>

$(document).ready(function() {
$('input[name=score]').change(function(){
$('form').submit();

$('#progressbar').css('width', function(index, value){
return value + 2;
});
});
});

</head>

<form>
<p>
Please select one of the variants below:
</p><br />
word
<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>

0/50

</body>
</html>