如何使用不同頁面上的復選框更新進度欄

Question

我想使用復選框更新進度欄值。 這個想法是在不同頁面上的復選框和進度條。 當我選中第1頁上的復選框時，它將更新另一頁上的進度條值。 我真的被困住了。 嘗試了所有可能的事情。 幫我！！！

這是我的代碼：

回顧 - order.html

    <div class="progress">
         <p><progress id="avancement" value="0" max="100"></progress></p>
            <span class="sr-only"></span>
       </div>

   <script type="text/javascript">
   $(function() {
    $('.progressbar_chkbox').click(function() {
        var progress = sessionStorage.getItem("progress");
       $('#avancement').val(progress);
      });

    });

    </script>

Notification.php

    <div class="c-content-panel">
         <?php
           $result = mysqli_query($conn,$sql);
             while($row = mysqli_fetch_array($result,MYSQLI_BOTH))   
             {
          ?>
         <div class="c-body">
          <div class="alert alert-success alert-dismissible" role="alert"> This issue has been reported by <?php echo $row['your_name']; ?> from  <?php echo $row['store_name']; ?>
             <p> <?php echo $row['issue_title']; ?></p>
             <p><?php echo $row['file'] ?></p>
             <p><a href="uploads/<?php echo $row['file'] ?>" target="_blank">View File </a></p>
             <a class="c-font-slim" href="#">read this important alert message</a>.
             <button type="button" class="close" data-dismiss="alert" aria-label="Close">
             <span aria-hidden="true">&times;</span>
                                    </button>
                                </div> 
          <div class="c-content-panel">

            <div class="c-body">
              <div class="row">
                <div class="col-md-12">
                   <div class="panel panel-default">
                      <div class="panel-body"> 
                         <div class="form-group">
                           <label class="col-md-4 control-label">Action</label>
                              <form action="track.php" method="post">
                                <div class="col-md-6">
                                 <label class="checkbox-inline">
                                  <input type="checkbox" class="progressbar_chkbox"  type="checkbox" id="pending" onclick="send();" data-progress="20" value="pending">Pending </label>
                                   <label class="checkbox-inline">
                                   <input type="checkbox" id="inlineCheckbox2" class="progressbar_chkbox" id="read" type="checkbox" onclick="send();" data-progress="40" value="option2" value="read"> Read</label>
                                    <label class="checkbox-inline">
                                    <input type="checkbox" id="inlineCheckbox3" class="progressbar_chkbox" id="completed" type="checkbox" onclick="send();" data-progress="80" value="option3" name="completed"> Completed </label>
                                     <button type="button" class="btn btn-theme c-btn-square" onclick="send();">
                                        Submit</button>
                         </div>
                       </form> 
                     </div>
                   </div>
                  </div>
            </div>
 </div>

   </div>
   </div>
   </div>

 <?php } ?>
<script type="text/javascript">

            $(function() {

          $('.progressbar_chkbox').click(function() {

            var progress = $(this).data('progress');

            sessionStorage.setItem("progress", progress)

          });

        });
        </script>

Answer 1

我看到您正在使用sessionStorage。 您需要使用localStorage。 如果頁面來自同一原點，那應該可以工作-但是您在另一頁面上沒有$（'。progressbar_chkbox'），因此您需要使用setInterval檢查存儲

這是一個小提琴，因為SO不允許sessionStorage / localStorage

var tId;
$(function() {
  tId = setInterval(function() {
    var progress = localStorage.getItem("progress");
    $('#avancement').val(progress);
  },1000);
});

看一下

http://plungjan.name/SO/progress/page1.html
http://plungjan.name/SO/progress/page2.html