我正在尝试使用此方法来计算div类的数量：
if(end($array) !=0) { ?>
<div class="circleRed" title= <?= $cred['name']; ?> data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>
<script> document.getElementById("demoRed").innerHTML = $(".circleRed").length; </script>
// code to trigger modal
<?php
} elseif ($output > 100000){ ?>
<div class="circleYellow" title= <?= $cred['name']; ?> data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>
<script>document.getElementById("demoYellow").innerHTML = $(".circleYellow").length; </script>
// trigger modal again
<?php }else{ ?>
<div class="circleGreen" title= <?= $cred['name']; ?> data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
但是$().length仅在找到匹配的div类时显示一个值。如果没有找到匹配项，则不返回任何内容，并且我会在0的空白处留空。
更新：下面包括我的完整CSS和HTML源代码：
.circleRed {
background: #e60000;
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
transition: all ease-in-out 0.2s;
cursor: pointer;
}
.circleRed:hover {
border: 1px solid: #888;
background-color: #ff1a1a;
}
.circleGreen {
background: #00e600;
width: 20px;
height: 20px;
border-radius: 50px;
display: inline-block;
transition: all ease-in-out 0.2s;
cursor: pointer;
}
.circleGreen:hover {
border: 1px solid: #888;
background-color: #1aff1a;
}
.circleYellow {
background: #f9f906;
height: 20px;
width: 20px;
border-radius: 50px;
display: inline-block;
transition: all ease-in-out 0.2s;
cursor: pointer;
}
.circleYellow:hover {
border: 1px solid: #888;
background-color: #ffff00;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Favicons -->
<link rel="apple-touch-icon" href="../assets/img/apple-icon.png">
//<link rel="icon" href="../assets/img/favicon.png">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<link rel="stylesheet" href="../assets/css/material-dashboard.css?v=2.0.0">
<link href="../assets/assets-for-demo/demo.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<scirpt src="https://code/jquery.com/jquery-1.10.2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="">
<div class="wrapper">
<div class="sidebar" data-color="azure" data-image="../assets/img/sidebar-4.jpg" style="background-image: url("../assets/img/sidebar-4.jpg");">
<div class="logo">
<a>
<img src="../assets/img/logo.png"/></a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="">
<p>Dashboard</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="#pablo"> Dashboard</a>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-success card-header-icon">
<div class="card-icon">
<i class="material-icons">thumb_up</i>
</div>
<p class="card-category">Active PIs</p>
<h3 class="card-title"><p id="demoGreen"></p></h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">update</i> 02:17 PM<br> </div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-info card-header-icon">
<div class="card-icon">
<i class="material-icons">warning</i>
</div>
<p class="card-category">Critical PIs</p>
<h3 class="card-title"><p id="demoYellow"></p></h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">update</i> 02:17 PM<br> </div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-danger card-header-icon">
<div class="card-icon">
<i class="material-icons">thumb_down</i>
</div>
<p class="card-category">Inactive PIs</p>
<h3 class="card-title"><p id="demoRed"></p></h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">update</i> 02:17 PM<br> </div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-primary card-header-icon">
<div class="card-icon">
<i class="material-icons">error</i>
</div>
<p class="card-category">PIs With Comms Down</p>
<h3 class="card-title"><p id="demoGrey"></p></h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">update</i> 02:17 PM<br> </div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4" >
<div class="card card-chart" >
<div class="card-header card-header-rose">
<div class="ct-chart" id="completedTasksChart"></div>
</div>
<div class="card-body">
<h4 class="card-title">Current Status</h4>
<p class="card-category">
<div class="circleRed" title= Guildford Test data-toggle="modal" data-target="#myModal0"></div>
<script> document.getElementById("demoRed").innerHTML = $(".circleRed").length; </script>
<div class="modal" id="myModal0" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel0" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLable0">Location: Guildford Test </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Current issue: Missing video file. Please check /var/lib/surround/Videos.</p>
<p>Current log file size: 6.4G </p>
</div>
</div>
</div>
</div>
<!-- trigger modal with button -->
<div class="circleGreen" title= Burton on Trent data-toggle="modal" data-target="#myModal1"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel1">Location: Guildford </h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size: 9.8M </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- trigger modal with button -->
<div class="circleGreen" title= Woking data-toggle="modal" data-target="#myModal2"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel2">Location: Woking </h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size:
17M </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- trigger modal with button -->
<div class="circleGreen" title= Staines data-toggle="modal" data-target="#myModal3"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel3">Location: Staines </h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size:
9.8M</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- trigger modal with button -->
<div class="circleGreen" title= Swindon data-toggle="modal" data-target="#myModal4"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel4" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel4">Location: Swindon </h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size: 2.4M </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- trigger modal with button -->
<div class="circleGreen" title= Luton data-toggle="modal" data-target="#myModal5"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel5" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel5">Location: Luton</h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size:
32M </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="circleGrey" title= Harrogate data-toogle="modal" data-target="#myModal6"></div>
<script> document.getElementById("demoGrey").innerHTML = $('div.circleGrey').length;</script>
<!-- trigger modal with button -->
<div class="circleGreen" title= Wolverhampton data-toggle="modal" data-target="#myModal6"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel6" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel6">Location: Wolverhampton</h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size:
28M </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- trigger modal with button -->
<div class="circleGreen" title= Ipswich data-toggle="modal" data-target="#myModal7"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal7" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel7" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel7">Location: Ipswich</h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size: 1.7M </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</p>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">update</i> 02:17 PM<br> </div>
</div>
</div>
</div>
</div>
<div class="row">
<footer class="footer ">
<div class="container-fluid">
<nav class="pull-left">
<ul>
</li>
</ul>
</nav>
</div>
</footer>
</div>
</div>
</body>
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/bootstrap-material-design.js"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Charts Plugin, full documentation here: https://gionkunz.github.io/chartist-js/ -->
<script src="../assets/js/plugins/chartist.min.js"></script>
<!-- Library for adding dinamically elements -->
<script src="../assets/js/plugins/arrive.min.js" type="text/javascript"></script>
<!-- Notifications Plugin, full documentation here: http://bootstrap-notify.remabledesigns.com/ -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Material Dashboard Core initialisations of plugins and Bootstrap Material Design Library -->
<script src="../assets/js/material-dashboard.js?v=2.0.0"></script>
<!-- demo init -->
<script src="../assets/js/plugins/demo.js"></script>
</html>
答案 0 :(得分：1)
好的，根据我的评论，我认为您的问题是，如果该类不存在，脚本也不会输出，这就是为什么您不显示零的原因。
我会将脚本移出您的php循环：
<?php
if(end($array) !=0) {
?>
<div class="circleRed" title= <?= $cred['name']; ?> data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>
<?php
} elseif ($output > 100000){
?>
<div class="circleYellow" title= <?= $cred['name']; ?> data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>
<?php
}else{
?>
<div class="circleGreen" title= <?= $cred['name']; ?> data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>
将其放在结束body标签之前：
<!-- put this before the closing body tag -->
<script>
// I think you only have these three different colours, if you have any more, include them here
// you could use all jquery here instead of a mixture:
// $('#domGreen').html($(".circleGreen").length); this isthe jquery version of the below line
document.getElementById("demoGreen").innerHTML = $(".circleGreen").length;
document.getElementById("demoGrey").innerHTML = $('div.circleGrey').length;
document.getElementById("demoRed").innerHTML = $(".circleRed").length;
</script>
答案 1 :(得分：0)
您可以使用'||'，如果第一个操作数可以转换为true，则将其返回。否则，返回第二个操作数：
false || true
true