根据条件锁定和解锁
在本网站：website
涉及的代码：
/* CSS Document */
/* Float Elements
---------------------------------*/
.fl-lt {
float: left;
}
.fl-rt {
float: right;
}
/* Clear Floated Elements
---------------------------------*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.figure {
margin: 0px;
}
img {
max-width: 100%;
}
a,
a:hover,
a:active {
outline: 0px !important
}
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Primary Styles
---------------------------------*/
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
color: #888888;
margin: 0;
}
h2 {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
margin: 0 0 15px 0;
text-align: center;
text-transform: uppercase;
}
h3 {
font-family: 'Montserrat', sans-serif;
color: #222222;
font-size: 16px;
margin: 0 0 5px 0;
text-transform: uppercase;
font-weight: 400;
}
h6 {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
margin: 0 0 60px 0;
}
p {
line-height: 24px;
margin: 0;
}
/* Header Styles
---------------------------------*/
.header {
text-align: center;
background: url(../img/pw_maze_black_2X.png) left top repeat;
padding: 280px 0;
}
.logo {
width: 130px;
margin: 0 auto 35px;
}
.header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 50px;
font-weight: 400;
letter-spacing: -1px;
margin: 0 0 22px 0;
color: #fff;
}
.we-create {
padding: 0;
margin: 35px 0 55px;
}
.wp-pic {
margin-bottom: 20px;
}
.we-create li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #bcbcbc;
text-transform: uppercase;
font-weight: 400;
margin: 0 5px 0 0;
padding: 0 0 0 15px;
}
.we-create li:first-child {
background: none;
}
.start-button {
padding-left: 0px;
}
.start-button li a {
color: #fff;
}
.link {
padding: 15px 35px;
background: #7cc576;
color: #fff !important;
font-size: 16px;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
display: inline-block;
border-radius: 3px;
text-transform: uppercase;
line-height: 25px;
margin-bottom: 20px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.link:hover {
text-decoration: none;
color: #7cc576 !important;
background: #fff;
}
.link:active,
.link:focus {
background: #7cc576;
text-decoration: none;
color: #fff !important;
}
/* Navigation
---------------------------------*/
.main-nav-outer {
padding: 0px;
border-bottom: 1px solid #dddddd;
box-shadow: 0 4px 5px -3px #ececec;
position: relative;
background: #fff;
}
.main-nav {
text-align: center;
margin: 10px 0 0px;
padding: 0;
list-style: none;
}
.main-nav li {
display: inline;
margin: 0 1px;
}
.main-nav li a {
display: inline-block;
color: #222222;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
line-height: 20px;
margin: 17px 32px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.main-nav li a:hover {
text-decoration: none;
color: #7cc576;
}
.small-logo {
padding: 0 32px;
}
.main-section {
padding: 90px 0 110px;
}
/* Portfolio
---------------------------------*/
.Portfolio-nav {
padding: 0;
margin: 0 0 45px 0;
list-style: none;
text-align: center;
}
.Portfolio-nav li {
margin: 0 10px;
display: inline;
}
.Portfolio-nav li a {
display: inline-block;
padding: 10px 22px;
font-size: 12px;
line-height: 20px;
color: #222222;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
background: #f7f7f7;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Portfolio-nav li a:hover {
background: #7cc576;
color: #fff;
text-decoration: none;
}
.portfolioContainer {
margin: 0 auto;
padding-left: 15px;
}
.Portfolio-box {
text-align: center;
margin-bottom: 30px;
height: 350px;
width: 350px;
overflow: hidden;
float: left;
padding: 0;
}
.Portfolio-box img {
margin-bottom: 25px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Portfolio-box img:hover {
opacity: 0.6;
}
.Portfolio-nav li a.current {
background: #7cc576;
color: #fff;
text-decoration: none;
}
img {
max-width: 100%;
}
/* no transition on .isotope container */
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
.main-section.paddind {
padding-bottom: 60px;
}
/* Clients
---------------------------------*/
.client-part {
background: url(../img/section-bg1.jpg) center center no-repeat;
background-size: cover;
padding: 55px 0;
text-align: center;
}
.client-part-haead {
color: #fdfdfd;
font-size: 28px;
line-height: 41px;
margin: 30px 0 10px;
font-family: ''Open Sans',sans-serif';
font-style: italic;
}
.client {
padding: 0;
margin: 20px 0 0;
list-style: none;
text-align: center;
}
.client li {
display: inline;
margin: 0 15px;
}
.client li a {
display: inline-block;
}
.client li a img {
margin-bottom: 15px;
border-radius: 50%;
}
.client li a:hover {
text-decoration: none;
}
.client li a h3 {
color: #ffffff;
}
.client li a span {
color: #f1f1f1;
}
.quote-right {
font-style: normal;
width: 68px;
height: 68px;
margin: 0 auto;
border: 2px solid #7cc576;
border-radius: 50%;
display: block;
line-height: 68px;
text-align: center;
font-size: 27px;
color: #7cc576;
cursor: pointer;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.quote-right:hover {
color: #fff;
border: 2px solid #fff;
}
.c-logo-part {
background: #7cc576;
padding: 25px 0;
filter: alpha(opacity=60);
}
.c-logo-part ul {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.c-logo-part ul li {
display: inline;
margin: 0 25px;
}
.c-logo-part ul a {
display: inline-block;
margin: 0 20px;
}
.main-section.team {
padding: 85px 0;
}
.main-section.team h6 {
margin-bottom: 40px;
}
.portfolioContainer {
max-width: 1140px;
}
/* Animation Timers
---------------------------------*/
.delay-02s {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.delay-03s {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.delay-04s {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
.delay-05s {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
.delay-06s {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
.delay-07s {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
.delay-08s {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
.delay-09s {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
.delay-1s {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.delay-12s {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
span.fa-stack.fa-5x.has-badge {
width: 180px;
height: 180px;
}
#unlocked li:before {
content: '\2713';
display: inline-block;
color: green;
margin-left: -65px;
padding: 0 9px 0 0;
}
#unlocked li {
list-style-type: none;
font-size: 1.5em;
margin: 1px;
font-weight: bold;
}
#locked li:before {
content: '\274c';
display: inline-block;
color: red;
margin-left: -65px;
padding: 0 9px 0 0;
}
#locked li {
list-style-type: none;
font-size: 1.5em;
margin: 1px;
font-weight: bold;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<title>Homepage</title>
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style><![endif]-->
<script type="text/javascript" src="js/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script src="contactform/contactform.js"></script>
<link rel="stylesheet" href="css/stylebadge.css">
</head>
<body>
<header class="header" id="header">
<!--header-start-->
<div class="container">
<figure class="logo animated fadeInDown delay-07s">
<a href="#">
<img src="img/logo.png" alt="">
</a>
</figure>
<h1 class="animated fadeInDown delay-07s">Welcome To Knight Studios</h1>
<ul class="we-create animated fadeInUp delay-1s">
<li>We are a digital agency that loves crafting beautiful websites.</li>
</ul>
<a class="link animated fadeInUp delay-1s" href="#">Get Started</a>
</div>
</header>
<!--header-end-->
<nav class="main-nav-outer" id="test">
<!--main-nav-start-->
<div class="container">
<ul class="main-nav">
<li><a href="#header">Home</a>
</li>
<li><a href="#service">Services</a>
</li>
<li><a href="#Portfolio">Badges</a>
</li>
<li class="small-logo">
<a href="#header">
<img src="img/small-logo.png" alt="">
</a>
</li>
<li><a href="#client">Clients</a>
</li>
<li><a href="#team">Team</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
</div>
</nav>
<!--main-nav-end-->
<section class="main-section paddind" id="Portfolio">
<!--main-section-start-->
<div class="container">
<h2>Badges</h2>
<h6></h6>
<div class="portfolioFilter">
<ul class="Portfolio-nav wow fadeIn delay-02s">
<li><a href="#" data-filter="*" class="current">All Badges</a>
</li>
<li><a href="#" data-filter=".branding">Salesforce</a>
</li>
<li><a href="#" data-filter=".photography">L & TD</a>
</li>
</ul>
</div>
</div>
<div class="portfolioContainer wow fadeInUp delay-04s">
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=10>
<div class="badgesize">
<a href="#"><img src="img/66.png" alt=""></a>
</div>
</span>
<h3>Completionist</h3>
<p>Didnot submit timesheet for a week</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class="Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=15>
<div class="badgesize">
<a href="#"><img src="img/11.png" alt=""></a>
</div>
</span>
<h3>Get A LIFE</h3>
<p>Logged greater than 60 hours for the week</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=2>
<div class="badgesize">
<a href="#"><img src="img/22.png" alt=""></a>
</div>
</span>
<h3>Slogger</h3>
<p>Logged greater than 55 hours for the week</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=100>
<div class="badgesize">
<a href="#"><img src="img/1.png" alt=""></a>
</div>
</span>
<h3>Into The Game</h3>
<p>Starts Playing the Game</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=100>
<div class="badgesize">
<a href="#"><img src="img/2.png" alt=""></a>
</div>
</span>
<h3>Hipster</h3>
<p>Branding</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=20>
<div class="badgesize">
<img src="img/7.png" alt=""></a>
</div>
</span>
<h3>Windmills</h3>
<p>Photography</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box photography">
<span class="fa-stack fa-5x has-badge" data-count=0>
<div class="badgesize">
<img src="img/ltd1.png" alt=""></a>
</div>
</span>
<h3>Windmills</h3>
<p>Photography</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box photography">
<span class="fa-stack fa-5x has-badge" data-count=200>
<div class="badgesize">
<img src="img/ltd2.png" alt=""></a>
</div>
</span>
<h3>Windmills</h3>
<p>Photography</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
</div>
</section>
<!--main-section-end-->
<section class="business-talking">
<!--business-talking-start-->
<div class="container">
<h2>Let’s Talk Business.</h2>
</div>
</section>
<!--business-talking-end-->
<script type="text/javascript">
$(document).ready(function(e) {
$('#test').scrollToFixed();
$('.res-nav_click').click(function() {
$('.main-nav').slideToggle();
return false
});
});
</script>
<script>
wow = new WOW({
animateClass: 'animated',
offset: 100
});
wow.init();
</script>
<script type="text/javascript">
$(window).load(function() {
$('.main-nav li a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 102
}, 1500, 'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
})
</script>
<script type="text/javascript">
$(window).load(function() {
var $container = $('.portfolioContainer'),
$body = $('body'),
colW = 375,
columns = null;
$container.isotope({
// disable window resizing
resizable: true,
masonry: {
columnWidth: colW
}
});
$(window).smartresize(function() {
// check if columns has changed
var currentColumns = Math.floor(($body.width() - 30) / colW);
if (currentColumns !== columns) {
// set new column count
columns = currentColumns;
// apply width to container manually, then trigger relayout
$container.width(columns * colW)
.isotope('reLayout');
}
}).smartresize(); // trigger resize to set container width
$('.portfolioFilter a').click(function() {
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
});
return false;
});
});
</script>
</body>
</html>
我有两个徽章条件:(以下是两个徽章）
问题：
当计数（在徽章的右上方显示为“10”和“0”）大于“0”时，应显示“带有复选标记的解锁”，否则“应与十字锁定”应该在我们正常看到的悬停效应中，它应该被显示出来。
对我来说非常棘手。如果有人可以帮助，请多多帮助。谢谢。上帝保佑。
1 个答案:
答案 0 :(得分：2)
您可以迭代所有Portfolio-box，检查他们何时拥有带数据计数的＆span徽章＆gt; 0，然后显示/隐藏锁定/解锁
$.each($('.Portfolio-box'), function() {
var count = $(this).children('has-badge').attr('data-count');
if(count > 0) {
$(this).children('ul.locked').hide();
$(this).children('ul.unlocked').show();
} else {
$(this).children('ul.locked').show();
$(this).children('ul.unlocked').hide();
}
});
在你的html替换中
<ul id="unlocked">
<ul id="locked">
有关
<ul class="unlocked">
<ul class="locked">
您可以做的另一个选择是使用PHP根据您的业务规则不生成锁定/解锁的HTML，例如：
<?php if($badgeCount >0): ?>
<ul class="unlocked">
....
</ul>
<? else: ?>
<ul class="locked">
....
</ul>
<? endif; ?>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？