复选框生成的进度条出现在不同的页面中

Posted 2023-05-09

【中文标题】复选框生成的进度条出现在不同的页面中

【英文标题】：Progress bar generated by checkboxes to appear in different pages

【发布时间】：2016-05-20 19:45:09

【问题描述】：

伙计们！如果这个问题重复其他问题，我深表歉意，但我找不到任何解决方案，也没有太多时间来解决它。

我的问题是我必须在基于 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>

【参考方案1】：

我会给你一些开始的东西。运行下面的代码sn -p。

如果您在页面上加载了给定的 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>