Question

家伙！如果这个问题重复了一些，我很抱歉，但我找不到任何解决方案，也没有太多时间来解决它。

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

如果有人有这个代码的解决方案或者有更好的建议去做其他方式，我会非常感谢。对不起，可能是愚蠢的问题，但我还是jun。。谢谢！：）

我的基本代码（基于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，那么你要做的就是用类＃34; progressbar_chkbox＆＃34;来定义一堆复选框。和一个进度条元素ID和＃34;进度条＆＃34;它会起作用。

这不是最好的解决方案，但对你来说是件好事。您应该考虑将其变为jQuery extension.

＆＃13;

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);
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: