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

【问题标题】：Changing 'width' of the progress bar in CSS with JQuery使用 JQuery 更改 CSS 中进度条的“宽度”
【发布时间】：2018-09-12 18:24:13
【问题描述】：

我正在学习 JQuery，但我认为我没有理解一些基础知识。每次单击其中一个单选按钮时，我都试图将进度条的宽度（好像它正在移动）更改为 +2%。但是我的函数是错误的（值 + 2）。我将不胜感激任何有关此的cmets。当我将其更改为某个固定值时，它并不会真正保持这种状态。我猜“更改方法”每次都会初始化整个事情。所以我的问题是将结果写入文件的最佳方法是什么（我现在用“提交”做什么）并同时增加进度条的“宽度”值？非常感谢任何评论。

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

【问题讨论】：

在“提交”表单之后，通常会重新加载页面并再次加载脚本（如果不是 Ajax） - 这可能是问题所在。

标签： jquery css

【解决方案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

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

【讨论】：

【解决方案2】：

首先，您在 JavaScript 中使用 HTML 注释 ()，它使用 // 或 /* ... */ cmets。

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

Here is a working example。我更改了评论并将百分比放入变量中。我必须删除 form.submit() 才能让 JSFiddle 工作，但你可以保留它。

【讨论】：