Question

更新我对David Thomas给出的CSS进行了一些修改。它现在是一面旗帜。

.div.popular::before {
  /* setting the default styles for
     the generated content: */
  display: block;
  width: 10em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  background: #F60;
  color: #fff;
  font-size: 1.4rem;
  position: absolute;
  top: 30px;
  right: 0px;
  z-index: 1;
}

我想在这篇文章中做一个折角：Folded banner using css

---原帖---

首先让我解释一下我要做的事情。我试图通过制作一个带有一些号召性用语的小圆圈来给予一些额外的关注。

但我只想在div有特定类时触发它。

因此，如果div populair或sale我希望在该帖子上显示一个小圆圈。这个脚本我现在正在使用。

$(document).ready(function($){
  if($("#front-page-items").hasClass('populair')){
    $(".populair-div").show();
  }
  if($("#front-page-items").hasClass('sale')){
    $(".sale-div").show();
  }    
});

这个HTML：

<div class="populair-div" style="display:none;">
    <strong>Populair</strong>
</div>
<div class="sale-div" style="display:none;">
    <strong>Sale</strong>
</div>

但这只显示populair-div而不显示另一个。我猜我的剧本是错的。我是否应该将else用于所有其他号召性用语类？

$(document).ready(function($){
  if($("#front-page-items").hasClass('populair')){
    $(".populair-div").show();
  }
  else($("#front-page-items").hasClass('sale')){
    $(".sale-div").show();
  } 
  else($("#front-page-items").hasClass('Free')){
    $(".free-div").show();
  } // and so on
});

有人可以帮助我吗？也可以echo div，所以我不必为每个号召行动div写一个完整的div？

Answer 1

对于类似这样的内容，显示的文本显式链接到元素的类名，最容易使用CSS和生成的内容，有效地隐藏了您不希望默认显示的元素然后显式允许您要显示的元素以及这些元素的生成内容（使用::before和::after伪元素：

div {
  /* preventing <div> elements
     from showing by default: */
  display: none;
}
div.populair-div,
div.sale-div {
  /* ensuring that elements matching
     the selectors above (<div>
     elements with either the 'sale-div'
     or 'populair-div' class-names
     are shown: */
  display: block;
}
div.populair-div::before,
div.sale-div::before {
  /* setting the default styles for
     the generated content: */
  display: block;
  width: 4em;
  height: 4em;
  line-height: 4em;
  text-align: center;
  border: 3px solid transparent;
  border-radius: 50%;
}
div.populair-div::before {
  /* setting the text with the
     "content" property: */
  content: "Popular";
  /* providing a specific colour
     for the generated contents'
     border: */
  border-color: #0c0;
}
div.sale-div::before {
  content: "Sale";
  border-color: #f90;
}
/* entirely irrelevant, just so you can
   see a (slightly prettified) difference
   should you remove the default display
   property for the <div> elements: */

code {
  background-color: #ddd;
}
em {
  font-style: italic;
}

<div class="neither-popular-nor-sale">
  <p>
    This element should not be shown, it has neither a class of <code>"populair-div"</code>  <em>or</em>  <code>"sale-div"</code>.
  </p>
</div>
<div class="populair-div">
</div>
<div>Also not to be shown.</div>
<div class="sale-div">
</div>

Answer 2

您可以使用toggle功能。它会更短更清晰。

显示或隐藏匹配的元素。

注意：按钮用于测试。

$(document).ready(function($){
  init();     
});

function init() {
  $(".populair-div").toggle($("#front-page-items").hasClass('populair'));
  $(".sale-div").toggle($("#front-page-items").hasClass('sale'));  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front-page-items" class="populair sale"></div>
<div class="populair-div">populair-div</div>
<div class="sale-div">sale-div</div>
<hr />
<button onclick="document.getElementById('front-page-items').classList.toggle('populair');init()">toggle populair</button>
<button onclick="document.getElementById('front-page-items').classList.toggle('sale');init()">toggle sale</button>

当帖子有课时显示div

2 个答案: