[已解决]旧版本的问题 // Jquery 帮助升级到最新版本

Posted 2023-05-08

【中文标题】[已解决]旧版本的问题 // Jquery 帮助升级到最新版本

【英文标题】：[RESOLVED ]Problem with an old version of // Jquery Help upgrade to last version

【发布时间】：2021-10-20 22:13:07

【问题描述】：

迁移到 jquery 3 后我遇到了代码问题

不工作：需要更新并需要删除 ui jquery 我想迁移到 3.6 但出现错误： https://jsfiddle.net/alex447/u817ybjk/1/

工作但旧版本： https://jsfiddle.net/alex447/c06tb5rL/28/

已经做了很少的jquery，我想在最新的jquery版本中查看代码，并且没有ui-query，以便显示进度条。

如果你用 ui jquery 将代码更改为版本1.5 你可以看到我想要的最终结果。

如果我去 jquery 3.4.1 或其他我有错误：

"jQuery.Deferred 异常：$(...).progressbar 不是函数", “TypeError: $(...).progressbar 不是函数 在 htmlDocument. (https://fiddle.jshell.net/_display/?editor_console=true:728:23) 在可能投掷 (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js:3534:29) 在进程 (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js:3602:12)", 未定义

谢谢

【参考方案1】：

您必须添加jQuery ui 库，（知道progress() 函数属于最后一个），

它适用于以前的版本，因为这是一个自动导入 ui 的选中输入，如您在此处看到的：

添加主题 + jQuery ui cdn url 将解决这个问题jsFiddle

但如果你想摆脱 jQuery ui，

您可以创建自己的进度，一些 css 和简单的 js，如下面的片段所示：

$(document).ready(function() 
    
    $("#progressbar").css("width",0);
    
    $('[type*=radio]').click(function() 
        var totalChecked = 0;
        var totalRadioGroups = 0;
        var previousName = '';
        $.each($('[type*=radio]'), function(index, value) 
            var radioName = $(this).attr('name');
            var radioId = this.id;
            
            if (previousName != radioName) 
                totalRadioGroups++;
            
            if ($('#' + radioId).is(':checked')) 
                totalChecked++;
            
            previousName = radioName;
        );
        var percentage = (totalChecked / totalRadioGroups) * 100;
        $('#progressbar').css('width', percentage+"%");
        $('#progressbar').html(percentage.toFixed(2) + "%");
        
        $('#percentage').html(percentage.toFixed(2) + "%");
    );

);

#progress-container 
  width: 100%;
  border: 1px solid #ddd;
  height:25px;
  border-radius:5px;
  overflow:hidden;


#progressbar 
  height: 25px;
  background-color: #0412AD;
  text-align: center;
  line-height: 30px;
  color: white;
  width:0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Question 1<br>
<div class="js-form-item">
  <input type="radio" name="radioQone" id="radioQ11">Option 1<br>
</div>
<div class="js-form-item">
<input type="radio" name="radioQone" id="radioQ12">Option 2<br>
</div>
<div class="js-form-item">
<input type="radio" name="radioQone" id="radioQ13">Option 3<br>
</div>
<br>Question 2<br>
<div class="js-form-item79">
<input type="radio" name="radioQtwo" id="radioQ21">Option 1<br>
</div>
<div class="js-form-item78">
<input type="radio" name="radioQtwo" id="radioQ22">Option 2<br>
</div>
<div class="js-form-item34">
<input type="radio" name="radioQtwo" id="radioQ23">Option 3<br>
</div>
<br>Question 3<br>
<div class="js-form-item111">
<input type="radio" name="radioQthree" id="radioQ31">Option 1<br>
</div>
<div class="js-form-item11">
<input type="radio" name="radioQthree" id="radioQ32">Option 2<br>
</div>
<div class="js-form-item3">
<input type="radio" name="radioQthree" id="radioQ33">Option 3<br>
</div>

<br>Question 3<br>
<div class="js-form-item5">
<input type="radio" name="radioQFOUR" id="radioQ35">Option 1<br>
</div>
<div class="js-form-item-">
<input type="radio" name="radioQFOUR" id="radioQ36">Option 2<br>
</div>
<div class="js-form-itemè">
<input type="radio" name="radioQFOUR" id="radioQ37">Option 3<br>
</div>
<br>
<div id="progress-container">
  <div id="progressbar">
    
  </div>
</div>
<div id="percentage">
  <p>fff</p>
</div>

【讨论】：

您好，但在 localhost 我有问题：未捕获的 TypeError: $(...).progressbar is not a function at HTMLDocument. (app.js?qy2w85:35) at e (jquery .min.js?v=3.6.0:2) 在 t (jquery.min.js?v=3.6.0:2) jsfiddle.net/alex447/u817ybjk/1

新的 jsfiddle : jsfiddle.net/alex447/u817ybjk/6

尝试在 jquery js 脚本之后添加：<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 和 <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

谢谢！你认为没有 jquery ui 可以做到吗？还有吗？

@AlexSol 如果你不想使用 jQuery ui，这很简单，只要看看我的 sn-p 就可以了，我已经为你提出了一个解决方案