javascript - 由复选框生成的进度条显示在不同页面中

Question

伙计们!如果这个问题重复出现，我很抱歉，但我找不到任何解决方案，也没有太多时间来解决它。

我的问题是我必须在基于 WordPress 的网站中制作进度条。它必须由位于一页上的复选框生成，但进度条不在同一页上。它会出现在更多页面上。进度条代码位于 template.php 和页面(我希望它显示的位置)中，我使用 get_template_part() 。 jQuery 代码位于其自己的 .js 文件中。如果下面的代码在一页中，则可以正常工作，但我需要它在网站的任何地方都可以工作。 我还必须不仅为当前 session 保存此功能，而且要永久保存它，并且仅在有新的选中复选框时才更新它。

如果有人对此代码有解决方案或有更好的建议以其他方式实现，我将非常感激。很抱歉问了一些愚蠢的问题，但我还是个小学生。谢谢! :)

我的基本代码(基于 Bootstrap )是:

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

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>