我在遷移到jquery 3之后遇到了一個代碼問題
不作業:需要更新和需要洗掉ui jquery 我想遷移到3.6,但出現了錯誤:。
添加主題 jQuery ui cdn url可以解決這個問題jsFiddle
但如果你想擺脫jQuery的ui,
你可以創建自己的jQuery ui。
你可以創建你自己的進度,一些css和簡單的js,如下圖所示:
。$(document). ready(function() {
$("#progressbar").css("width",0) 。
$('[type*=radio]').click(function() {
var totalChecked = 0;
var totalRadioGroups = 0;
var previousName = ''/span>;
$.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-tainer {
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">/span></script>
問題1<br>/span>
<div class="js-form-item">
< input type="radio" name="radioQone" id="radioQ11"> 選項1<br>
</div>/span>
<div class="js-form-item">/span>
< input type="radio" name="radioQone" id="radioQ12"> 選項2<br>
</div>/span>
<div class="js-form-item">/span>
< input type="radio" name="radioQone" id="radioQ13"> 選項3<br>
</div>/span>
<br>問題 2<br>
<div class="js-form-item79"/span>>
< input type="radio" name="radioQtwo" id="radioQ21"> 選項1<br>
</div>/span>
<div class="js-form-item78">
< input type="radio" name="radioQtwo" id="radioQ22"> 選項2<br>
</div>/span>
<div class="js-form-item34">/span>
< input type="radio" name="radioQtwo" id="radioQ23"> 選項3<br>
</div>/span>
<br>問題3<br>/span>
<div class="js-form-item111"/span>>
< input type="radio" name="radioQthree"/span> id="radioQ31"/span>> 選項1<br>
</div>/span>
<div class="js-form-item11">
< input type="radio" name="radioQthree"/span> id="radioQ32"/span>> 選項2<br>
</div>/span>
<div class="js-form-item3">
< input type="radio" name="radioQthree"/span> id="radioQ33"/span>> 選項3<br>
</div>/span>
<br>問題3<br>/span>
<div class="js-form-item5"/span>>
< input type="radio" name="radioQFOUR"/span> id="radioQ35"/span>> 選項1<br>
</div>/span>
<div class="js-form-item-">/span>
< input type="radio" name="radioQFOUR"/span> id="radioQ36"/span>> 選項2<br>
</div>/span>
<div class="js-form-itemè">/span>
< input type="radio" name="radioQFOUR"/span> id="radioQ37"/span>> 選項3<br>
</div>/span>
<br>/span>
<div id="progress-tainer">
<div id="progressbar"/span>>
</div>/span>
</div>/span>
<div id=" percentage">
<p>/span>fff</p>/span>
</div>/span>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/319908.html
標籤:
