Javascript 如何使用不同页面上的复选框更新进度条
我想使用复选框更新进度条值。其思想是在不同的页面上设置复选框和进度条。当我选中第1页上的复选框时,它将更新另一页上的进度条值。我真的被卡住了。尽了一切可能。帮帮我 这是我的代码: Review-order.htmlJavascript 如何使用不同页面上的复选框更新进度条,javascript,php,html,Javascript,Php,Html,我想使用复选框更新进度条值。其思想是在不同的页面上设置复选框和进度条。当我选中第1页上的复选框时,它将更新另一页上的进度条值。我真的被卡住了。尽了一切可能。帮帮我 这是我的代码: Review-order.html <div class="progress"> <p><progress id="avancement" value="0" max="100"></progress></p>
<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>
$(函数(){
$('.progressbar_chkbox')。单击(函数(){
var progress=sessionStorage.getItem(“progress”);
$(#avancement').val(进度);
});
});
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">×</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>
此问题已由来自的报告
.
&时代;
行动
悬而未决的
阅读
完整的
提交
$(函数(){
$('.progressbar_chkbox')。单击(函数(){
var progress=$(this.data('progress');
setItem(“进度”,progress)
});
});
我看到您正在使用会话存储。您需要使用本地存储。如果这些页面来自同一个来源,则应该可以使用此方法-但是另一个页面上没有$('.progressbar_chkbox'),因此需要使用setInterval检查存储
下面是一个示例,因为SO不允许会话存储/localStorage
var tId;
$(function() {
tId = setInterval(function() {
var progress = localStorage.getItem("progress");
$('#avancement').val(progress);
},1000);
});
看看
可能使用,或@mplungjan:两个页面来自同一来源。但是还是不行不行不行,两个答案都不行。Progressbar仍然为空–Notification.php中的按钮单击是否有任何问题?请查看更新的fiddle。如果页面位于同一个原点,那么只要检查小提琴就可以了。奇怪的是,它是在小提琴上工作,但不是在本地主机上。您需要本地存储。会话存储仅用于一页-请参阅更新并将
onclick=“send();”
移动到单击处理程序