javascript - 根据条件锁定和解锁

标签 javascript php jquery html css

在此网站中: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>

我有两个徽章条件:(下面是两个徽章)

unlocked badge locked badge

问题:

当计数(在徽章右上角显示为“10”和“0”)大于“0”时，应显示“已解锁并带有复选标记”，否则应显示“已锁定并带有十字”被显示并且它应该像我们通常看到的悬停效果一样褪色。

这对我来说很棘手。请帮助，如果有人可以。非常感谢。上帝保佑。

最佳答案

您可以迭代所有Portfolio-box，检查它们何时具有数据计数> 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; ?>

关于javascript - 根据条件锁定和解锁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40683573/

上一篇：html - 如何将两个悬停效果添加到同一个 div

下一篇：html - 对齐页脚的方法？

相关文章：

php - 当值包含连字符时，htaccess rewriterule 不起作用

Javascript:计算 Safari/iOS 中溢出容器的元素的宽度

jQuery Ajax GET 和 contentType？

javascript - 将 javascript 变量传递给 xsl 条件

c# - 如何从 C# with\r 获取 String 到 JavaScript 变量？

javascript - 缺少 Express SSL 身份验证功能？

php - 执行另一个 PHP 文件并返回方法的输出，这可能吗？

php - INSERT INTO 不工作我做错了什么？

javascript - 特定 anchor 链接的平滑滚动

javascript - 为什么这个三元运算符在 JS 中无效

©2024 IT工具网  联系我们