復選框生成的進度條顯示在不同的頁面中

Question

伙計們！ 如果這個問題重復出現，我深表歉意，但是我找不到任何解決方案，也沒有太多時間來解決它。

我的問題是我必須在基於wordpress的網站上制作進度條。 它必須由位於一頁上的復選框生成，但是進度條不在同一頁上。 它會出現在更多頁面上。 進度條代碼位於template.php和頁面（我希望在其中顯示的頁面）中，我使用get_template_part（）。 jQuery代碼在其自己的.js文件中。 如果位於一頁內，則下面的代碼可以正常工作，但是我需要它可以在站點中的任何地方工作。 我不僅必須為當前會話保存此功能，還必須永久保存它，並且僅當有新的選中復選框時才對其進行更新。

如果有人對此代碼有解決方案或有其他更好的建議，我將非常感謝。 對不起，可能是愚蠢的問題，但我還是小三。 謝謝！ :)

我的基本代碼（基於引導）是：

jQuery(document).ready(function(){

    //Progress bar generated by checkboxes
    var emptyValue = 0;

    $('input').on('click', function Progressbar() {
    emptyValue = 0;
    $('input.videoChecks:checked').each(function() {
        emptyValue += parseInt($(this).val());
    });
    $('.progress-bar').css('width', emptyValue + '%').attr('aria-valuenow',emptyValue);
    });
    });


<!-- Begin checkboxes -->
    <div class="panelBody" id="panelBody1">

    <input id="input1" class="videoChecks" type="checkbox" name="completed1" value="20">
    <input id="input2" class="videoChecks" type="checkbox" name="completed2" value="20">
    <input id="input3" class="videoChecks" type="checkbox" name="completed3" value="20">
    <input id="input4" class="videoChecks" type="checkbox" name="completed4" value="20">
    <input id="input5" class="videoChecks" type="checkbox" name="completed5" value="20">

    </div>

    <!-- Begin progress bar -->
    <div class="progress" >
    <div id="progress-bar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    </div>
    </div>

Answer 1

我給你一些開始。 運行下面的代碼段。

如果您在頁面上加載了給定的javascript，那么您要做的就是定義一堆帶有“ progressbar_chkbox”類的復選框和一個ID為“ progress-bar”的進度條元素，它將起作用。

這不是最好的解決方案，但您可以從中開始。 您應該考慮將其轉換為jQuery擴展。

 jQuery(document).ready(function() { jQuery('.progressbar_chkbox').on('click', function() { var currValue = 0; jQuery(".progressbar_chkbox:checked").each(function() { currValue += parseInt($(this).val()); }); currValue = Math.min(currValue, 100); jQuery('#progress-bar').css('width', currValue + '%').attr('aria-valuenow', currValue); }); }); 

 .progress-bar { background: red; height: 100px; width: 0%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Begin checkboxes --> <div class="panelBody" id="panelBody1"> <input id="input1" class="progressbar_chkbox videoChecks" type="checkbox" name="completed1" value="20"> <input id="input2" class="progressbar_chkbox videoChecks" type="checkbox" name="completed2" value="20"> <input id="input3" class="progressbar_chkbox videoChecks" type="checkbox" name="completed3" value="20"> <input id="input4" class="progressbar_chkbox videoChecks" type="checkbox" name="completed4" value="20"> <input id="input5" class="progressbar_chkbox videoChecks" type="checkbox" name="completed5" value="20"> </div> <!-- Begin progress bar --> <div class="progress"> <div id="progress-bar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> </div> </div>